CN-121388315-B - Non-invasive text highlighting method and system based on mobile H5 and Web page

CN121388315BCN 121388315 BCN121388315 BCN 121388315BCN-121388315-B

Abstract

The application relates to the field of Web front-end technology and data processing, and discloses a non-invasive text highlighting method and system based on mobile H5 and Web pages, wherein the method comprises the following steps of S1, acquiring a highlighting task, S2, positioning and generating corresponding initial range objects in a document according to a target text, S3, sorting the initial range object set in a descending order according to the corresponding priority values, S4, gathering original uncluttered ranges of the initial range objects to be processed currently, and S5, summarizing all final range objects generated in iterative processing. The application avoids performance problems caused by DOM modification through non-invasive rendering, and ensures logic correctness and certainty of highlight visual effect when multiple ranges overlap through a conflict resolution algorithm based on priority.

Inventors

ZHAO XIAOYANG
YUAN YE
KONG FEI
LI MING

Assignees

北京中绿讯科科技有限公司

Dates

Publication Date: 20260512
Application Date: 20250926

Claims (7)

1. A non-intrusive text highlighting method based on mobile H5 and Web pages, comprising the steps of: s1, acquiring a highlight task, wherein the highlight task comprises a target text, a custom style and a priority value; S2, positioning and generating a corresponding initial range object in the document according to the target text to form an initial range object set; S3, sorting the initial range object set in a descending order according to the corresponding priority value, and carrying out iterative processing on the initial range object according to the descending order sorting result; S4, merging the original unclamped range of the initial range object to be processed currently into a processed range accumulation area for clipping the initial range object with lower priority in subsequent iteration; S5, summarizing all final range objects generated in the iterative processing, and realizing text highlighting in a non-invasive rendering mode based on the final range objects; in step S3, the performing iterative processing on the initial range object specifically includes: Initializing a processed range accumulation region; processing the initial range objects one by one according to the descending order of the results, and executing range difference set operation in each processing to subtract the range part overlapped with the processed range accumulation region from the initial range object to be processed currently so as to generate a final range object; in step S4, the clipping the initial range object with the lower priority specifically includes: Comparing the initial range object to be processed with the processed range accumulation area through range difference set operation; If the current to-be-processed initial range object and the processed range accumulation area are partially overlapped, the cutting operation generates two separated and discontinuous final range objects; The two separate and non-contiguous final scope objects both originate from the same initial scope object and are commonly associated to one shared CSS highlight identifier, ensuring that the separate and non-contiguous final scope objects are rendered to the same custom style.
2. The non-intrusive text highlighting method based on mobile H5 and Web pages as recited in claim 1, wherein in step S1, the obtaining highlighting task comprises: acquiring the highlighting task by monitoring a user interaction event in a document; the user interaction event comprises a direct interaction event aiming at a text node or an indirect interaction event aiming at a specified target element; when the user interaction event is a direct interaction event, the target text is determined to be text content in a text node hit by the user interaction operation; When the user interaction event is an indirect interaction event, the target text is determined to be text content having a preset positional relationship with the specified target element.
3. The non-intrusive text highlighting method based on mobile H5 and Web pages as recited in claim 1, wherein in step S2, the constructing the initial set of objects comprises: further including DOM elements in the highlighting task as query scopes; The operation of locating and generating the corresponding initial scope object in the document according to the target text is strictly limited to the DOM element of the query scope so as to form the initial scope object set in a specified area.
4. The non-intrusive text highlighting method based on mobile H5 and Web pages as recited in claim 3, wherein DOM elements of the query scope specifically comprise: Monitoring a user interaction event aiming at a certain appointed target element in the DOM element of the query range, wherein when the user interaction event is triggered, the method is configured to execute highlighting processing of a pre-text; the highlighting of the pre-text is specifically to traverse forward through the pre-sibling nodes in the document structure starting from the position of the specified target element to locate the text content that needs to be highlighted.
5. The non-intrusive text highlighting method based on mobile H5 and Web pages as recited in claim 1, wherein in step S3, the descending order of priority values comprises: taking a priority value associated with each initial range object in the initial range object set as a sequencing key; and integrally sequencing the initial range object set to generate an initial range object list with orderly arranged priority values from high to low for subsequent iterative processing.
6. The non-invasive text highlighting method based on mobile H5 and Web pages according to claim 1, wherein in step S5, the implementing text highlighting by non-invasive rendering means comprises: Generating a globally unique CSS highlight identifier for the final scope object; Registering each highlight object containing the final scope object with a corresponding CSS highlight identifier in a highlight registry of the browser; CSS pseudo-element style rules associated with the CSS highlight identifiers are dynamically generated to apply the custom style to a browser rendering layer to complete text highlighting.
7. A mobile H5 and Web page based non-intrusive text highlighting system, according to any of claims 1-6, wherein the mobile H5 and Web page based non-intrusive text highlighting method comprises: the task acquisition unit is used for acquiring a highlight task, wherein the highlight task comprises a target text, a custom style and a priority value; The range generation unit is connected with the task acquisition unit and is used for receiving a highlight task and generating an initial range object set according to a target text in the highlight task; a conflict resolution unit, coupled to the range generation unit, for receiving the initial range object set and configured to output a final range object set; And the highlighting rendering unit is connected with the conflict resolution unit and is used for receiving the final range object set and realizing text highlighting in a non-invasive mode based on the final range object set and the corresponding custom style thereof.

Description

Non-invasive text highlighting method and system based on mobile H5 and Web page Technical Field The invention relates to the field of Web front-end technology and data processing, in particular to a non-invasive text highlighting method and system based on mobile H5 and Web pages. Background Today, where digitized information interaction is increasingly frequent, users need to quickly locate and focus on key information in a vast amount of text data. Whether the search engine needs to mark the query words of the user in the result page or the online collaboration document needs to show endorsements of different collaborators or the electronic reading software needs to record key paragraphs drawn by the user, the application scenes are highly dependent on a core function, namely text highlighting. A stable, accurate and logically clear text highlighting function is a basic technical guarantee for improving the readability of digital content and the information acquisition efficiency. In response to the above-described needs, there is provided in the prior art an implementation based on Document Object Model (DOM) modification. The solution locates the target text by the client script and wraps the text fragment with a new inline element (e.g., < span > tag), and applies a CSS style to the element. The method has the advantages that the implementation principle is direct, the compatibility is good in all mainstream web browsers, and the basic and independent text highlighting visual effect can be reliably realized. Meanwhile, as the highlight area forms an actual DOM node, the subsequent script can conveniently inquire or further operate the actual DOM node through the standard DOM interface. However, this DOM modification-based solution exposes its inherent technical drawbacks when dealing with complex and dynamic highlighting requirements, and first, the solution is invasive, each time the DOM structure is modified for highlighting, frequent DOM changes cause the browser to reorder and redraw, resulting in performance overhead and interface churning when performing large-scale highlighting operations. Second, and most critical, is that this approach does not provide an effective conflict resolution mechanism when there is overlap in the ranges of multiple highlight requests. It may create a cluttered nesting of labels, with the final visual presentation being determined by the browser's complex CSS layering rules, rather than by the priority of the business logic, which results in the highlighting against the expected, logical confusion. For example, when a high-priority annotation overlaps a low-priority keyword tag, there is no guarantee that the high-priority visual effect will correctly overlay the low-priority effect. Disclosure of Invention Aiming at the defects of the prior art, the invention provides a non-invasive text highlighting method and a non-invasive text highlighting system based on mobile H5 and Web pages, which solve the problems that the conventional text highlighting method is usually realized by modifying a Document Object Model (DOM) and the mode can cause performance degradation and style conflict due to DOM structure change. In order to achieve the above purpose, the invention is realized by the following technical scheme: A first aspect of the present invention provides a non-intrusive text highlighting method based on a mobile H5 and a Web page, the method comprising the steps of: s1, acquiring a highlight task, wherein the highlight task comprises a target text, a custom style and a priority value; S2, positioning and generating a corresponding initial range object in the document according to the target text to form an initial range object set; S3, sorting the initial range object set in a descending order according to the corresponding priority value, and carrying out iterative processing on the initial range object according to the descending order sorting result; S4, merging the original unclamped range of the initial range object to be processed currently into a processed range accumulation area for clipping the initial range object with lower priority in subsequent iteration; And S5, summarizing all final range objects generated in the iterative processing, and realizing text highlighting in a non-invasive rendering mode based on the final range objects. In a specific embodiment, the iterative processing of the initial range object in step S3 specifically includes: initializing a processed range accumulation region; And processing the initial range objects one by one according to the descending order of the results, and executing range difference set operation in each processing. The operation subtracts the portion of the range that overlaps the processed range accumulation region from the initial range object currently to be processed, thereby generating one or more final range objects. The range difference set operation may be expressed as: ; In the formula, An initial r