Method and device for quickly positioning wrongly written characters based on rich text content
By sending the html string of rich text content to the error correction server for error correction checking, the front-end uses the javascript API to obtain the typo range and create a DOM tag, which enables quick and accurate positioning and marking typos in rich text content, and solves the problem. The problems of false alarms, missed alarms and inaccurate markings in traditional methods, and provide custom click event functions.
Patent Information
- Application Number
- CN202411450886.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-17
- Publication Date
- 2025-02-07
AI Technical Summary
When dealing with large amounts of rich text content, traditional typo detection tools are prone to false positives or missed reports due to the influence of html tags, and the tags are inaccurate, making it difficult to quickly locate and accurately mark typos.
By obtaining the html string with rich text content, sending it to the error correction server for processing, converting it to plain text for error correction checking, and returning the typo content and index, the front-end uses the javascript API to obtain the typo range, create a DOM tag and insert the text range , complete mark.
It realizes the fast and accurate positioning and marking of typos in a large number of rich text content, and provides the function of binding custom click events to mark typos to adapt to personalized needs of different scenarios.
Smart Images

Figure CN119398036A_ABST
Abstract
Description
Technical Field
[0001] The invention belongs to the technical field of text and natural language processing, and in particular relates to a method for quickly locating and marking typos while maintaining the original article format in a rich text format, and binding a custom click event to the marked typos. Background Art
[0002] In background systems such as content management, article content is often written in a rich text editor to be published to the front-end page. When dealing with large amounts of rich text content, such as online articles, news reports, public publications, etc., the appearance of typos will seriously affect the quality and readability of the text, and even cause information errors. Especially when it comes to the publication of government websites, typos and sensitive words are even more demanding. Traditional typo detection tools are usually based on rules or machine learning. When dealing with large amounts of rich text content, these methods may be affected by the influence of html tags in the rich text content and may have false positives or omissions. The marking of typos will also be affected by html tags, and there may be inaccurate marking. Therefore, it is of great practical value to develop a method for quickly locating typos based on rich text content.
[0003] Chinese patent CN110968989B discloses a method for displaying error correction information on the front-end page. The main technical scheme is: after detecting the operation of putting the judgment document into a rich text editor in the format of a web document, a request for error correction of the judgment document is sent to the background; the error point fed back by the background and the error correction label corresponding to the error point are received, wherein the error correction label at least includes the error correction reason information and the correction information; the position information of the error point on the judgment document is obtained; a mapping relationship is established between the position information and the error correction label corresponding to the error point; when receiving the operation of clicking the error correction label, according to the position information that has a mapping relationship with the error correction label, the error point and the error correction label at the position corresponding to the position information are displayed on the front-end page. The present invention is mainly used for the intelligent error correction execution review of judgment documents. Summary of the invention
[0004] In view of the above technical problems, the present invention discloses a method and device for quickly locating and marking typos based on rich text content. The method can quickly and accurately locate and mark typos in a large amount of rich text content.
[0005] To achieve the above purpose, the technical solution adopted by the present invention is: a method for quickly locating typos based on rich text content, including obtaining rich text content in a page, sending the HTML string of the rich text content to an error correction server through an https request, and processing the rich text content by the error correction server, converting it into plain text content for error correction checking. After checking, the error correction server returns the check result including the content of the typos and the corresponding index as interface response data to the front end.
[0006] The error correction server returns the result further including: The interface response data is processed as follows: a. Determine whether the returned data is correct: Use the window.find method to determine whether the typo exists in the rich text based on the typo content and index. If so, further process it; b. After confirming that there is a typo, obtain the range object data range of the typo through the javascript API method; c. After finding the range, create a document object model tag DOM and set the corresponding error style in the DOM; d. Use the extractContents method of range to return the corresponding document fragment DocumentFragment object and put it into the created DOM; e. Then insert the DOM into the selected text range to complete the marking.
[0007] The method for processing the interface response data is encapsulated into a javascript function method that is executed in a loop. The input parameters include a rich text HTML string and an info object. The info object includes the following attributes: text attribute, which is the typo in the article; index attribute, which is the index value of the typo in HTML; tagName attribute, which is the name of the created DOM tag, which defaults to the span tag; style attribute, which is the style of the created DOM element; id attribute, which is the id of the created DOM element; class attribute, which is the class of the created DOM element; attr attribute, which is the attribute of the created DOM element.
[0008] Furthermore, the info object also includes a click attribute, which is the created DOM element click event. Through the click attribute, this method can provide external extensions, bind a custom click event to the marked typos, and perform custom processing through the bound custom events, such as quickly correcting and replacing typos, to meet the personalized customization needs in different scenarios.
[0009] Furthermore, if multiple typos appear in a piece of rich text content, after being returned by the error correction server, the returned data can be processed into an array and then the array can be looped to call the general function method of javascript in sequence to locate the typos.
[0010] The present invention also provides a device for quickly locating typos based on rich text content. The device includes a front-end javascript encapsulation function based on a B / S browser. When the front-end javascript encapsulation function is executed, the aforementioned method for quickly locating typos based on rich text content is implemented. The javascript encapsulation function can be introduced into different front-end technology stacks to implement the call.
[0011] The present invention has the following beneficial effects: by calling the method, the front end can quickly locate and mark typos on the view in the rich text editor; the method is encapsulated as a general javascript function method and can be called in the page of any front-end technology stack.
[0012] In addition, this method also provides external extensions, which can bind custom click events to marked typos, and can also perform customized processing through the bound custom events, such as quickly correcting and replacing typos, to meet personalized customization needs in different scenarios. BRIEF DESCRIPTION OF THE DRAWINGS
[0013] Figure 1 This is a flow chart of interface response data for a method for quickly locating typos based on rich text content according to an embodiment of the present invention. DETAILED DESCRIPTION
[0014] To facilitate understanding by those skilled in the art, the present invention is further described below in conjunction with embodiments and drawings.
[0015] The method for quickly locating typos based on rich text content in this embodiment includes obtaining rich text content in a page, sending the HTML string of the rich text content to an error correction server through an HTTP (S) request, and processing the rich text content by the error correction server, converting it into plain text content for error correction checking. After checking, the error correction server returns the check result including the content of the typos and the corresponding index as interface response data to the front end.
[0016] The error correction server returns the error correction result, which further includes: like Figure 1 As shown, the interface response data is processed as follows: 1. According to the wrong character content and the corresponding index value returned by the background, use the JavaScript window.find method combined with the wrong character index to find the range corresponding to the text.
[0017] 2. After getting the range of the typo, create a new DOM element and set the mark style of the typo.
[0018] 3. Put the DocumentFragment object returned by the range.extractContents method into the created DOM.
[0019] 4. Finally, use the range.insertNode method to insert the DOM into the selected text range to complete the marking.
[0020] The above steps can be encapsulated into a general function method of javascript, and the input parameters include a rich text html string and an info object; the info object includes the following attributes: text attribute, that is, the typo in the article; index attribute, that is, the index value of the typo in the html; tagName attribute, the name of the created DOM tag, which defaults to the span tag; style attribute, that is, the style of the created DOM element; id attribute, that is, the id of the created DOM element; class attribute, that is, the class of the created DOM element; attr attribute, that is, the attribute of the created DOM element; click attribute, that is, the click event of the created DOM element.
[0021] If there are multiple typos in a piece of rich text content, after being returned by the error correction server, the returned data can be processed into an array, and the array can be looped to call the general function method of javascript in turn to locate the typos.
[0022] The above method is based on the front-end javascript encapsulation function of the B / S browser side.
[0023] The above embodiments are only for illustrating the technical idea of the present invention, and cannot be used to limit the protection scope of the present invention. Any changes made on the basis of the technical solution in accordance with the technical idea proposed by the present invention shall fall within the protection scope of the present invention.
Claims
1. A method for quickly locating typos based on rich text content, characterized in that: It includes obtaining the rich text content in the page, sending the HTML string of the rich text content to the error correction server through an https request, and the error correction server processes the rich text content and converts it into plain text content for error correction checking; After checking, the error correction server returns the check results including the content of the typos and the corresponding index to the front end as interface response data; The interface response data is processed as follows: a. Determine whether the returned data is correct: Determine whether the typo exists in the rich text based on the typo content and index. If so, further process it; b. After confirming that there is a typo, obtain the range object data range of the typo through the javascript API method; c. After finding the range, create a DOM tag to set the corresponding error style; d. Use the extractContents method of range to return the corresponding document fragment DocumentFragment object and put it into the created DOM; e. Insert the DOM into the selected text range to complete the markup.
2. The method for quickly locating typos based on rich text content according to claim 1, characterized in that: The method for processing the interface response data is encapsulated into a javascript function method that is performed in a loop. The input parameters include a rich text HTML string and an info object; the info object includes: The text attribute refers to the typos in the article; The index attribute is the index value of the typo in HTML; tagName attribute, the name of the created DOM tag, the default is the span tag; The style attribute, that is, the style of the DOM element created by the info object includes the following attributes; The id attribute is the id of the created DOM element; The class attribute is the class of the created DOM element; attr attribute, that is, the attribute of the created DOM element.
3. The method for quickly locating typos based on rich text content according to claim 2, characterized in that: The info object also includes: click attribute, which is the created DOM element click event.
4. The method for quickly locating typos based on rich text content according to any one of claims 1 to 3, characterized in that: If there are multiple typos in a piece of rich text content, after being returned by the error correction server, the returned data will be processed into an array, the array will be processed in a loop, and the general function method of javascript will be called in sequence to locate the typos.
5. A device for quickly locating typos based on rich text content, characterized in that: The device includes a front-end javascript encapsulation function based on a B / S browser end, and when the front-end javascript encapsulation function is executed, the method for quickly locating typos based on rich text content as described in any one of claims 1-4 is implemented.
Citation Information
Patent Citations
Methods and devices for displaying error correction information on the front-end page
CN110968989B