A method based on WEB document marking technology

Abstract

The present invention discloses a research on WEB document marking technology in the field of document marking technology, including configuring initialization text; splitting the initialization text into individual characters and creating a DOM; according to whether it is read-only, selecting to add a text marking event or continuing to judge whether there is marking data; judging whether there is marking data, if so, wrapping the marking data with span tags respectively, adding colors and names, and inserting them into the text DOM, otherwise ending the steps; according to read-only, seeing whether to add a delete marking event; triggering the delete event, first deleting the current marking data, and then executing S2; the present invention can easily obtain the true subscript of the text; it adopts the idea of separating the storage of marking data and real text and combining rendering, greatly reducing the coupling degree between data and enhancing readability, maintainability and extensibility.

Description

Technical Field

[0001] The present invention relates to the technical field of document marking, in particular to a method based on WEB document marking technology. Background Art

[0002] The knowledge graph platform includes functions such as information extraction, knowledge extraction, knowledge storage and management. The platform will automatically identify and mark some keywords in the document and then display them on the page. On this basis, users can also mark new keywords on the page and delete duplicate or unnecessary keywords. This involves how to extract and mark keywords on the page, how to store and render the marked data and text data separately, and it is necessary to develop document marking methods. This technology can be used in all businesses that need to mark and echo on the page, such as literature, news, document annotations and information extraction.

[0003] The prior art generally includes the following:

[0004] Solution 1: JavaScript's built-in window.getSelection method can obtain parameters such as the text selected by the user on the page, the starting and ending DOM nodes of the area, the offset in the starting and ending DOM nodes, and whether the starting and ending nodes are the same DOM node.

[0005] Solution 2 is based on online document editing and rich text editing controls on web pages. They do secondary encapsulation based on window.getSelection. Getting the text selected by the user is only the most basic function of the control. This function can be used to change the text font size, bold, color and other styles.

[0006] However, the disadvantage of solution 1 is that when the selected text only exists in one DOM node, the subscript in the DOM can be accurately obtained, but when the selected text exists in multiple DOM nodes, the real subscript cannot be obtained. In a document, there are many text tags, and this method alone cannot achieve the expected effect.

[0007] Solution 2's acquisition of selected text is only a basic function, which is highly coupled with the control; the official API does not mention this function; if you want to do secondary development, you can only read the source code. Due to the complexity of the control, the cost of transformation is very high, and even if it is stripped out in time, it only realizes the function of acquiring text.

[0008] Based on this, the present invention designs a method based on WEB document marking technology to solve the above problems. Summary of the invention

[0009] The object of the present invention is to provide a method based on WEB document marking technology to solve the problems proposed in the above background technology, namely, when there are multiple dom nodes in the selected text, the true subscript cannot be obtained; the controls are complex and the transformation cost is very high, and even if separated, only the function of obtaining text is realized.

[0010] To achieve the above object, the present invention provides the following technical solution: A method based on WEB document marking technology, comprising the following steps:

[0011] S1: Configure the initial text;

[0012] S2: Split the initial text into single characters and create a DOM;

[0013] S3: According to whether it is read-only, if it is read-only, then select to add a text marking event; otherwise, continue to judge whether there is marked data;

[0014] S4: Judge whether there is marked data. If there is, wrap the marked data with span tags respectively, add colors and names, and insert them into the text DOM. Otherwise, end the steps;

[0015] S5: Judge whether to add a delete marking event according to whether it is read-only; if it is read-only, add a delete marking event, trigger the delete marking event, first delete the current marked data, and then execute S2.

[0016] Preferably, in S1, the configuration of the initial text is specifically to initialize the data according to parameters to configure the text, marking type and color, control the maximum length of text selection, and whether it is read-only.

[0017] Preferably, in S2, the creation of the DOM is specifically to split the initial text into single characters, wrap them with i tags respectively, and add subscripts to the i tags.

[0018] Preferably, after the text marking event is triggered in S3, the specific steps are as follows:

[0019] S31: Remove the previously selected but unmarked text;

[0020] S32: Judge whether there is selected content. If not, return to S31;

[0021] S33: Calculate the position of the marking type selection box according to the position where the mouse is lifted and display it;

[0022] S34: Judge whether the selected text already has marked content. If so, prompt "The selected text already has marked content and cannot be marked";

[0023] S35: Calculate whether the length of the selected text is within the range of the maximum text selection length of the configuration parameter. If not, prompt "Exceeded word count display, cannot be marked", process the forward and reverse drag data to ensure that the smaller subscript is in the front;

[0024] S36: Wrap and render the selected text with the span tag, and add the isNew attribute to identify the selected data that has not been marked yet;

[0025] S37: If the marking type is selected, insert the data into the marked data and execute step two. Otherwise, execute S31 according to the user operation.

[0026] Compared with the prior art, the beneficial effects of the present invention are:

[0027] The present invention is based on native JavaScript and does not depend on any JavaScript framework, and can be used freely in various web front-end system frameworks; through this method, the real subscript of the text can be easily obtained; it adopts the idea of separating the marked data and the real text for storage and combining rendering, which greatly reduces the coupling degree between data and enhances readability, maintainability and extensibility. BRIEF DESCRIPTION OF THE DRAWINGS

[0028] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0029] Figure 1 It is a schematic diagram of splitting the text of the present invention into individual nodes;

[0030] Figure 2 It is a schematic diagram of selecting the text marking type of the present invention;

[0031] Figure 3 It is a schematic diagram of marking the text of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0032] The following will clearly and completely describe the technical solutions in the embodiments of the present invention with reference to the drawings in the embodiments of the present invention. Obviously, the described embodiments are only a part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those of ordinary skill in the art without creative efforts belong to the scope of protection of the present invention.

[0033] Please refer to Figures 1 - 3 , the present invention provides a technical solution: A method based on WEB document marking technology, including the following steps:

[0034] S1: Configure the initialization text;

[0035] S2: Split the initialization text into individual characters and create a DOM;

[0036] S3: Based on whether it is read-only, if it is read-only, then select to add a text marking event; otherwise, continue to judge whether there is marking data;

[0037] S4: Judge whether there is marking data. If there is, wrap the marking data with span tags respectively, add colors and names, and insert them into the text DOM. Otherwise, end the steps;

[0038] S5: Judge whether to add a delete marking event according to whether it is read-only; if it is read-only, add a delete marking event, trigger the delete marking event, first delete the current marking data, and then execute S2.

[0039] The present invention provides a method for marking selected text in a browser page, making up for the deficiency of the window.getSelection function provided by JavaScript, which can only achieve the position of the selected text in the entire text for a single and non-nested DOM node. Because various types of marked text, icons, styles, and processing events need to be inserted into the text, the text DOM nodes have multiple layers of nesting and other DOM nodes, and the true position of the marked text cannot be obtained through window.getSelection. Therefore, by splitting the text data to form a single DOM rendering method, it can be ensured that no matter how complex the text nesting level and the content contained are, the true position can be accurately found, thus preventing text rendering from being disordered.

[0040] The marking text function is realized by separating the storage of text data and marking data and combining the rendering idea.

[0041] This method is encapsulated based on native JavaScript and can be used freely in various web front-end system frameworks without relying on any component libraries, making it convenient to use.

[0042] Externally provide the content of the initialization text, marking types and colors, control the maximum length of text selection, and pass parameters for configuration of whether it is read-only.

[0043] Among them, in S1, the configuration of the initialization text specifically means initializing data configuration text, marking types and colors, controlling the maximum length of text selection, and whether it is read-only according to parameters.

[0044] Among them, in S2, the creation of the DOM specifically means splitting the initialization text into individual characters, wrapping them with i tags respectively, and adding subscripts to the i tags.

[0045] Among them, in S3, the specific steps after the addition of the text marking event is triggered are as follows:

[0046] S31: Remove the previously selected but unmarked text;

[0047] S32: Determine whether there is selected content. If not, return to S31;

[0048] S33: Calculate the position of the marking type selection box based on the position where the mouse is lifted and display it;

[0049] S34: Determine whether the selected text already has marked content. If so, prompt "The selected text already has marked content and cannot be marked";

[0050] S35: Calculate whether the length of the selected text is within the length range of the maximum text selection word in the configuration parameter. If not, prompt "Exceed the word count display and cannot be marked", process the forward and reverse drag data to ensure that the smaller subscript is in the front;

[0051] S36: Wrap and render the selected text with the span tag, and add the isNew attribute to identify the selected data that has not been marked yet;

[0052] S37: If the marking type is selected, insert the data into the marking data and execute step two. Otherwise, execute S31 according to the user operation.

[0053] The present invention splits the text into individual nodes, and locates the real text interval subscript by obtaining the attribute values of the initial node and the end node. It adopts the idea of separating the storage of marking data and real text and combining rendering. The type and color of the marking text can be configured.

[0054] The present invention is based on native JavaScript and does not depend on any JavaScript framework, and can be used freely in various web front-end system frameworks; through this method, the real subscript of the text can be easily obtained; it adopts the idea of separating the storage of marking data and real text and combining rendering, which greatly reduces the coupling degree between data and enhances readability, maintainability and extensibility.

[0055] In the description of this specification, the descriptions referring to terms such as "one embodiment", "example", "specific example", etc. mean that the specific features, structures, materials or characteristics described in connection with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described can be combined in a suitable manner in any one or more embodiments or examples.

[0056] The preferred embodiments of the present invention disclosed above are only used to help illustrate the present invention. The preferred embodiments do not describe all the details in detail, nor do they limit the invention to the specific embodiments described. Obviously, many modifications and variations can be made according to the content of this specification. These embodiments are selected and specifically described in this specification to better explain the principles and practical applications of the present invention, so that those skilled in the art can well understand and utilize the present invention. The present invention is only limited by the claims and their full scope and equivalents.

Claims

1. A method based on WEB document marking technology, characterized in that, it includes the following steps: S1: Configure the initialization text; S2: Split the initialization text into single characters and create a DOM; S3: According to whether it is read-only, if it is read-only: then select to add a text marking event; otherwise: then continue to judge whether there is marking data; S4: Judge whether there is marking data. If there is, wrap the marking data with span tags respectively, add colors and names, and insert them into the text DOM. Otherwise, end the steps; S5: Judge whether to add a delete marking event according to whether it is read-only; if it is read-only, add a delete marking event, trigger the delete marking event, first delete the current marking data, and then execute S2.

2. The method based on WEB document marking technology according to claim 1, characterized in that: In S1, the configuration of the initialization text is specifically to initialize the data configuration text, marking type and color, control the maximum length of text selection, and whether it is read-only according to parameters.

3. The method based on WEB document marking technology according to claim 1, characterized in that: In S2, the creation of the DOM is specifically to split the initialization text into single characters, wrap them with i tags respectively, and add subscripts to the i tags.

4. The method based on WEB document marking technology according to claim 1, characterized in that: After the addition of the text marking event in S3 is triggered, the specific steps are: S31: Remove the previously selected but unmarked text; S32: Judge whether there is selected content. If not, return to S31; S33: Calculate the position of the marking type selection box according to the position where the mouse is lifted and display it; S34: Judge whether the selected text already has marked content. If so, prompt "The selected text already has marked content and cannot be marked"; S35: Calculate whether the length of the selected text is within the range of the maximum text selection length of the configuration parameter. If not, prompt "Exceed the word count display and cannot be marked", process the positive and negative drag data to ensure that the smaller subscript is in the front; S36: Wrap and render the selected text with span tags, and add an isNew attribute to identify that the selection has not added marking data; S37: If the marking type is selected, insert the data into the marking data and execute step two. Otherwise, execute S31 according to the user's operation.

Images