Method for processing rich text highlighting through list display under Harmony Next App

Abstract

The invention relates to the technical field of rich text processing display, in particular to a method for processing rich text highlighting through list display under a Harmony Next App, which comprises the following steps of: firstly, obtaining rich text contents containing HTML (Hypertext Markup Language) format tags, analyzing the rich text through modes such as regular expression matching, generating node data of a tree structure, and introducing a dynamic weight distribution algorithm to optimize tag analysis priority; and reducing redundant data by using a node similarity merging algorithm. Based on node data, a Harmony OS native component is used for carrying out fine-grained rendering, according to business logic or keywords input by a user, font color attributes of a Span component are dynamically adjusted, highlight display is achieved, and a style and rendering logic are decoupled to flexibly configure a highlight strategy. According to the method, a pre-analysis and caching mechanism, lightweight rendering and other strategies are adopted to optimize the performance, and the method is suitable for various scenes such as rich text search keyword highlighting, specific field style emphasizing and multi-theme switching real-time style adaptation.

Description

Technical Field

[0001] The present invention relates to the technical field of rich text processing and display, and specifically provides a method for processing and highlighting rich text in a list display of Harmony Next App. Background Technique

[0002] Harmony OS Next provides a Rich Text component in APP development for parsing and displaying HTML format text (rich text). The Rich Text component is suitable for loading and displaying an HTML string, and only supports limited general attributes and events. It does not support modifying the background color, font color, font size, and dynamically changing the content by setting attributes and events. The official recommends using Web components to achieve custom HTML string customization.

[0003] In addition, the Rich Text component consumes a relatively large amount of memory. In some scenarios where the Rich Text component is repeatedly implemented, phenomena such as lag and slow sliding response may occur. In such cases, the official recommends using the Rich Editor component, which is more suitable for scenarios that require editing.

[0004] In summary, in the scenario of searching and highlighting in a list, when highlighting and displaying rich text, Web components, Rich Text, and Rich Editor are not suitable for the above scenarios. There are still defects in the above technical conditions.

[0005] Therefore, a method for processing and highlighting rich text in a list display of Harmony Next App is proposed for the above problems. Summary of the Invention

[0006] The purpose of the present invention is to provide a method for processing and highlighting rich text in a list display of Harmony Next App to solve the problems raised in the above background technique.

[0007] To achieve the above purpose, the present invention provides the following technical solutions:

[0008] A method for processing and highlighting rich text in a list display of Harmony Next App includes the following steps:

[0009] S1. Obtain rich text content containing HTML format tags;

[0010] S2. Parse the rich text content containing HTML format tags to generate node data in a tree structure. The node data includes text content and its corresponding style attributes;

[0011] S3. Based on the node data, use the native components of Harmony OS for fine-grained rendering, and achieve high-light display by setting the general attributes of the native components of Harmony OS.

[0012] As a preferred solution, the steps of parsing rich text content containing HTML format tags include:

[0013] Match the tags and text content in the rich text containing HTML format tags through specific rules. The specific rules are as follows:

[0014] Match the start tag that starts with a left angle bracket, followed by a tag name composed of non-right angle bracket characters, and ends with a right angle bracket;

[0015] Match the text content composed of non-left angle bracket characters after the start tag. This text content is an optional item;

[0016] Match the end tag that starts with a left angle bracket and a slash, followed by a tag name composed of non-right angle bracket characters, and ends with a right angle bracket;

[0017] Extract the custom style attributes in the tags, and associate and store the custom style attributes with the text content in the node data of the tree structure;

[0018] Introduce a dynamic weight distribution algorithm to optimize the tag parsing priority. The dynamic weight distribution algorithm calculates the tag parsing weight through the following logic:

[0019] The parsing weight of a tag is obtained by the weighted sum of the complexity factor and the nesting depth. The complexity factor is the ratio of the number of attributes of the tag to the preset maximum number of attributes plus the logarithm to the base 2 of the nesting level number of the tag plus 1. The nesting depth is the nesting level number of the tag;

[0020] The sum of the weight coefficients of the complexity factor and the nesting depth is 1, and the default values are 0.7 and 0.3 respectively.

[0021] As a preferred solution, a node similarity merging algorithm is introduced in step S2 to optimize the tag parsing priority. Its logic is as follows:

[0022] Calculate the style similarity of two node data, specifically the ratio of the number of common style attributes of the two node data to the number of all style attributes of the two node data;

[0023] When the ratio is greater than or equal to 0.8, merge the two node data to reduce redundant data.

[0024] As a preferred solution, the native components of Harmony OS include Text components and Span components, where:

[0025] The Text component serves as the parent container for hosting multiple Span sub-components;

[0026] The Span component dynamically sets at least one of the font color, font size, or background color according to the style attributes in the node data of the tree structure to achieve highlighted display.

[0027] As a preferred solution, the present invention further includes:

[0028] During the list rendering process, the parsed node data is directly embedded into the list item template to avoid repeated parsing of the same rich text content;

[0029] The real-time rendering calculation overhead is reduced through pre-parsing and caching mechanisms, and the memory occupancy during list sliding is reduced by lightweight native components.

[0030] As a preferred solution, the implementation of highlighted display includes:

[0031] According to the business logic or keywords input by the user, the font color attribute of the Span component is dynamically adjusted;

[0032] Through the decoupling of style attributes and rendering logic, flexible configuration of highlighting strategies is supported.

[0033] As a preferred solution, the present invention further includes:

[0034] A state machine parser is introduced to handle nested tag structures and multi-level style inheritance relationships;

[0035] Global default font size, color, and background parameters are defined, and local styles are overridden through global configuration to reduce duplicate code.

[0036] It can be seen from the technical solutions provided by the present invention above that a method for processing rich text highlighting in a Harmony Next App list display provided by the present invention has the beneficial effects that:

[0037] From the perspective of rich text parsing, by using regular expressions to match and distinguish plain text nodes and text nodes wrapped by tags, and extracting and storing the custom style attributes in association with the text content, rich text can be accurately parsed; introducing a dynamic weight distribution algorithm to optimize the tag parsing priority, calculating the weight based on the tag complexity factor and nesting depth, and preferentially parsing complex tags to improve the parsing efficiency; the node similarity merging algorithm reduces redundant data, and when the node style similarity reaches the threshold, the nodes are merged to optimize the node data structure;

[0038] At the rendering level, native Harmony OS components are used for fine-grained rendering, and high-lighting display is achieved by setting the attributes of Text and Span components; the font color of the Span component is dynamically adjusted based on business logic or user input keywords, and the style attributes are decoupled from the rendering logic, supporting flexible configuration of the high-lighting strategy and meeting diverse high-lighting requirements in different scenarios; in list rendering, the parsed node data is directly embedded into the list item template to avoid repeated parsing and improve rendering efficiency;

[0039] For complex HTML tags, a state machine parser is introduced to handle the nested tag structure and multi-level style inheritance relationship to ensure the accuracy of parsing and the correctness of style inheritance; the global style configuration module defines default font sizes, colors, and background parameters, and local styles are overridden through global configuration to reduce duplicate code and enhance the maintainability of the code;

[0040] In terms of performance optimization, a pre-parse and caching mechanism for node data is adopted to reduce the real-time rendering calculation overhead and reduce rendering latency; during the list sliding process, strategies such as lightweight rendering of native components, component reuse, and loading on demand are used to reduce memory occupancy, ensure smooth list sliding, and improve the user experience; at the same time, the method of the present invention is applicable to various scenarios such as high-lighting display of search keywords in rich text within a list, emphasizing styles of specific fields in dynamic content, and real-time style adaptation in multi-theme switching scenarios, and has wide applicability. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 It is a schematic flow chart of the method steps for processing rich text high-lighting in a Harmony Next App following list display of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0042] In order to make the objectives, technical solutions, and advantages of the present invention clearer and more understandable, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0043] To better understand the above technical solutions, the above technical solutions will be described in detail below in conjunction with the drawings of the specification and the specific embodiments.

[0044] As Figure 1 shown, an embodiment of the present invention provides a method for processing rich text high-lighting in a Harmony Next App following list display, including the following steps:

[0045] S1. Obtain rich text content containing HTML format tags;

[0046] S2. Parse the rich text content containing HTML - formatted tags to generate node data in a tree - like structure. The node data includes the text content and its corresponding style attributes;

[0047] The steps of parsing the rich text content containing HTML - formatted tags include:

[0048] Match the tags and text content in the rich text containing HTML - formatted tags through specific rules. The specific rules are as follows:

[0049] Match the start tag that starts with a left angle bracket, followed by a tag name composed of non - right angle bracket characters, and then ends with a right angle bracket;

[0050] Match the text content composed of non - left angle bracket characters after the start tag. This text content is an optional item;

[0051] Match the end tag that starts with a left angle bracket and a slash, followed by a tag name composed of non - right angle bracket characters, and then ends with a right angle bracket;

[0052] Extract the custom style attributes in the tags and store the custom style attributes and the text content in an associated manner in the node data of the tree - like structure;

[0053] Introduce a dynamic weight assignment algorithm to optimize the tag parsing priority. The dynamic weight assignment algorithm calculates the tag parsing weight through the following logic:

[0054] The parsing weight of a tag is obtained by the weighted sum of the complexity factor and the nesting depth. The complexity factor is the ratio of the number of attributes of the tag to the preset maximum number of attributes plus the logarithm to the base 2 of the nesting level number of the tag plus 1. The nesting depth is the nesting level number of the tag;

[0055] The sum of the weight coefficients of the complexity factor and the nesting depth is 1, and the default values are 0.7 and 0.3 respectively;

[0056] Introduce a node similarity merging algorithm to optimize the tag parsing priority. Its logic is:

[0057] Calculate the style similarity of two node data, specifically the ratio of the number of common style attributes of the two node data to the number of all style attributes of the two node data;

[0058] When the ratio is greater than or equal to 0.8, merge the two node data to reduce redundant data;

[0059] S3. Based on the node data, use Harmony OS native components for fine - grained rendering and achieve high - light display by setting the general attributes of HarmonyOS native components.

[0060] In this embodiment, the function of step S1 is to obtain rich text content containing HTML format tags, providing the original data basis for subsequent parsing and related processing of the rich text. All subsequent operations rely on the accurately obtained rich text content. The following are the detailed steps:

[0061] Step S1-1: Determine the rich text source:

[0062] Clarify the acquisition channels of the rich text content, which may include user input, such as directly inputting rich text in the text input box of the application; or reading from an external file, such as reading rich text content from a locally stored HTML file; it may also come from a network request to obtain response data containing rich text from the server. The purpose of determining the source is to obtain the rich text in the correct way, as different sources have different acquisition methods and interface calls.

[0063] Step S1-2: Establish a connection (if necessary):

[0064] If the rich text source is a network request or if it is necessary to read a file from an external device, etc., a corresponding connection needs to be established. For example, when obtaining rich text from the server, it is necessary to use a network communication protocol (such as HTTP, HTTPS, etc.) to establish a connection with the server, set necessary parameters such as the request header and request method to ensure that the request can be successfully sent to the server and the response can be received. When reading from a local file, according to the rules of the file system, use the corresponding file operation functions or libraries to establish a connection with the file, specifying parameters such as the file path and open mode.

[0065] Step S1-3: Obtain the rich text:

[0066] According to the determined source and the established connection, perform the actual acquisition operation. If it is user input, directly extract the rich text content input by the user from the input control of the application. If it is obtained from the network, send a request and wait for the server response, and extract the rich text part containing HTML format tags from the response data. When reading from a local file, read the file content according to the specified open mode to ensure that the complete rich text content is read.

[0067] Step S1-4: Data verification:

[0068] Perform a preliminary verification on the obtained rich text content to check whether it meets the basic requirements of the HTML format specification. You can initially check for obvious format errors through simple regular expressions, such as whether tags appear in pairs, etc. If a format error is found, record the error information and, according to the design of the application, decide whether to prompt the user to re-enter (if it is the source of user input), or try to obtain the rich text from other sources, or attempt a certain degree of format repair (if feasible) to ensure that the rich text content for subsequent processing is basically usable in terms of format.

[0069] In this embodiment, the function of step S2 is to parse the rich text content and generate node data in a tree structure. These node data include the text content and its corresponding style attributes, providing basic data for subsequent fine-grained rendering using Harmony OS native components, enabling the rendering to achieve effects such as highlighted display according to the style attributes. The following are the detailed steps:

[0070] Step S2-1: Data preprocessing:

[0071] Preprocess the rich text content containing HTML format tags obtained in step S1 to remove interfering information such as redundant spaces, line breaks, and comments that may exist in it. This helps simplify the subsequent parsing process and improve the parsing efficiency. For example, use string processing methods to remove HTML comments <! --... --> and leading and trailing whitespace characters.

[0072] Step S2-2: Regular expression matching:

[0073] Match the tag pairs and the text content wrapped by them in the rich text through the regular expressions < > +> < *< / > +>. The matching rule of this regular expression is: < is the starting symbol of an HTML tag; > + means to match any character except > and at least match once, used to match the tag name and tag attributes; > is the ending symbol of an HTML tag; < * means to match any character except <, which can match zero or more times, used to match the text content wrapped by the tag; < / is the starting symbol of an HTML closing tag; > + matches any character except > at least once again, used to match the closing tag name; the last > is the ending symbol of an HTML closing tag. Through matching, pure text nodes and text nodes wrapped by tags are distinguished.

[0074] Step S2-3: Extract custom style attributes:

[0075] For the matched tags, extract the custom style attributes; the method of string splitting and searching can be used to extract the style-related attributes from the attribute part of the tag, such as the font color, font size, background color, etc. in the style attribute; associate the extracted style attributes with the corresponding text content to prepare for subsequent storage in the node data;

[0076] Step S2-4: Introduce the dynamic weight allocation algorithm:

[0077] During the process of parsing the tags, introduce the dynamic weight allocation algorithm to optimize the tag parsing priority; the formula is W(t i ) = α·C(t i ) + β·D(t i ), where W(t i ) represents the parsing weight of tag t i ; C(t i ) represents the complexity factor of tag t i , which is calculated from the tag nesting level and the number of attributes, and the calculation formula is where N attr (t i ) represents the number of attributes of tag t i , N max is the preset maximum number of attribute threshold, L nest (t i ) represents the nesting level of tag t i ; D(t i ) represents the nesting depth of tag t i ; α and β are adjustment coefficients, satisfying α + β = 1, and the default values are α = 0.7 and β = 0.3; according to the calculated parsing weight, give priority to parsing the tags with higher weights to improve the parsing efficiency;

[0078] Step S2-5: Generate node data:

[0079] Generate node data from the matched tags, text content, and associated style attributes in a tree structure; each node contains the node type (such as plain text node, tag node), text content, and style attributes; for nested tags, build the corresponding parent-child node relationship to form a tree structure; for example, for Hello such nested tags, the div node is the parent node and the p node is the child node;

[0080] Step S2-6: Introduce the node similarity merging algorithm:

[0081] During the process of generating node data, introduce the node similarity merging algorithm to reduce redundant data; the formula is where S(n i , nj ) represents node n i and n j 's style similarity; A(n i ) represents the set of style attributes of node n i ; A(n j ) represents the set of style attributes of node n j ; When S(n i , n j ) ≥ θ (the threshold θ is set to 0.8), merge node n i and n j , integrate their text content and style attributes to form a new node, thereby optimizing the node data structure;

[0082] Step S2-7: Output the node array:

[0083] Organize the generated and optimized node data into a node array for output; this array contains information about all nodes, including node type, text content, and style attributes, and maintains the hierarchical relationship of the tree structure; this node array will serve as the basic data for subsequent fine-grained rendering using Harmony OS native components.

[0084] In this embodiment, the Harmony OS native components include Text components and Span components, where:

[0085] The Text component serves as the parent container for hosting multiple Span child components;

[0086] The Span component dynamically sets at least one of the font color, font size, or background color according to the style attributes in the node data of the tree structure to achieve highlighted display.

[0087] In this embodiment, the role of step S3 is to perform fine-grained rendering using Harmony OS native components based on the node data generated in step S2, and achieve highlighted display by setting the general attributes of the native components, so as to present rich text content with a highlighted effect in the list of HarmonyNext App; the following are the detailed steps:

[0088] Step S3-1: Initialize the rendering environment:

[0089] Before starting the rendering, it is necessary to perform initialization operations on the Harmony OS rendering environment; this includes creating the necessary rendering context, loading the relevant rendering libraries and resources of Harmony OS to ensure that the rendering process can proceed normally; at the same time, according to the requirements of the application, set the basic parameters of the rendering, such as the size and resolution of the rendering area;

[0090] Step S3-2: Build the component hierarchy:

[0091] Based on the node data of the tree structure generated in Step S2, build the corresponding Harmony OS native component hierarchy; for each node, create the corresponding native component according to its node type; specifically:

[0092] Text component: As the parent container, it is used to carry multiple Span child components; when encountering a parent node with multiple child nodes, create a Text component and use it as the parent container;

[0093] Span component: Create a Span component for each text node according to the style attributes in the node data; the Span component will dynamically set at least one of the font color, font size, or background color according to the style attributes to achieve highlighted display;

[0094] Step S3-3: Set the component style attributes:

[0095] Apply the style attributes in the node data to the corresponding native components; for the Span component, set its font color, font size, background color and other attributes according to the style information stored in the node data; for example, if the node data specifies that the font color of a certain piece of text is red, then when creating the corresponding Span component, set its font color attribute to red; for the Text component, some general style attributes such as alignment and line spacing can also be set as needed;

[0096] Step S3-4: Implement the highlighted display logic:

[0097] Dynamically adjust the font color attribute of the Span component according to the business logic or the keywords input by the user to achieve highlighted display; the specific steps are as follows:

[0098] Determine the highlighted keywords: Obtain the keywords that need to be highlighted from the business logic or user input;

[0099] Search for matching text: Search for the text containing the highlighted keywords among all the Span components;

[0100] Adjust the style attributes: For the matching Span components, adjust their font color attributes to the highlighted color, such as yellow or red;

[0101] Step S3-5: Decouple configuration of style and logic

[0102] Support flexible configuration of the highlighting strategy through the decoupling of style attributes and rendering logic; the specific approach is as follows:

[0103] Define a style configuration file: Define different highlighting styles (such as different font colors, background colors, etc.) in a configuration file for easy unified management and modification;

[0104] Dynamically load styles: During the rendering process, dynamically load different highlighting styles according to business requirements without modifying the rendering logic code;

[0105] Step S3-6: Embed the list item template

[0106] During the list rendering process, directly embed the parsed node data into the list item template; This can avoid repeated parsing of the same rich text content and improve the rendering efficiency; The specific operations are as follows:

[0107] Create a list item template: Design the template structure of the list item, including layout and style;

[0108] Embed node data: Embed the node data generated in step S2 into the list item template to ensure that each list item can correctly display the rich text content;

[0109] Step S3-7: Render the component to the screen:

[0110] After completing the creation, style setting, and highlighting logic processing of the component, render the constructed component hierarchy to the screen; The rendering engine of Harmony OS will draw the component to the specified rendering area according to the component's attributes and layout information, and finally display the rich text content with highlighting effects in the list of Harmony Next App;

[0111] Step S3-8: Performance optimization and resource management:

[0112] During the rendering process, adopt some performance optimization strategies to ensure the fluency of the rendering process and the effective utilization of resources; The specific measures include:

[0113] Node data caching: Cache the parsed node data to avoid repeated parsing;

[0114] Lightweight rendering: During the list sliding process, reduce memory occupancy through the lightweight rendering of native components and improve the fluency of sliding.

[0115] In this embodiment, the present invention further includes:

[0116] During the list rendering process, directly embed the parsed node data into the list item template to avoid repeated parsing of the same rich text content;

[0117] Reduce the real-time rendering calculation overhead through the pre-parsing and caching mechanism, and reduce the memory occupancy during list sliding through lightweight native components;

[0118] The specific operation steps are as follows:

[0119] 1. Directly embed the parsed node data into the list item template to avoid repeated parsing:

[0120] During the list rendering process, if the rich text content is parsed every time a list item is rendered, a large amount of repeated work will be generated, reducing performance; while directly embedding the parsed node data into the list item template can effectively solve this problem. The following are the detailed steps:

[0121] 1. Data preparation:

[0122] After the rich text content is parsed in step S2, node data in a tree structure will be generated. These data include the text content and its corresponding style attributes; store these node data in an easily accessible data structure, such as a list or a dictionary, for convenient subsequent embedding operations;

[0123] 2. Template design:

[0124] Design the list item template, which stipulates the layout and structure of the list item; some positions will be reserved in the template for inserting node data. For example, placeholders or specific markers can be used to represent these positions; the template can be designed using the layout components and view components provided by HarmonyOS to ensure that the rich text content can be correctly displayed;

[0125] 3. Data embedding:

[0126] When rendering a list item, traverse each data item in the list and embed the corresponding parsed node data into the list item template; specifically, according to the positions reserved in the template, apply the text content and style attributes in the node data to the corresponding components; for example, if there is a Text component in the template for displaying text, set the text content in the node data as the text attribute of this Text component and set its font color, size, etc. according to the style attributes;

[0127] 4. Avoid repeated parsing:

[0128] Since the node data has been parsed in the previous steps, the embedding process simply applies the data to the template without the need to parse the rich text content again; in this way, no matter how many list items contain the same rich text content in the list, only one parsing operation is required, greatly improving the rendering efficiency;

[0129] 2. Reduce the real-time rendering calculation overhead through pre-parsing and caching mechanisms:

[0130] The pre - parsing and caching mechanism is an effective performance optimization strategy. It can perform computational work in advance and store the results to avoid repeated calculations during real - time rendering. The following are the specific implementation steps:

[0131] 1. Pre - parsing:

[0132] During the application startup or data loading phase, parse the rich text content in advance. This can be done by calling the parsing method described in step S2 to generate node data. The advantage of pre - parsing is to distribute the computational work to non - critical periods, avoiding a large amount of calculations during real - time rendering, thus reducing rendering latency.

[0133] 2. Caching mechanism:

[0134] Store the node data obtained from pre - parsing in the cache. The cache can use in - memory cache or disk cache. The specific choice depends on the size and usage frequency of the data. For example, a dictionary can be used as an in - memory cache, with the rich text content as the key and the corresponding node data as the value. During real - time rendering, first check whether the node data of the rich text content exists in the cache.

[0135] 3. Cache hit handling:

[0136] If the cache is hit, that is, the node data of the rich text content exists in the cache, directly obtain the node data from the cache and embed it into the list item template for rendering. This can avoid re - parsing operations and significantly reduce the computational overhead of real - time rendering.

[0137] 4. Cache update and eviction:

[0138] When the rich text content changes, the node data in the cache needs to be updated. By listening for data change events, re - parse when the data is updated and store the new node data in the cache. At the same time, to avoid the cache occupying too much memory or disk space, a cache eviction policy needs to be set. For example, use the Least Recently Used (LRU) algorithm. When the cache reaches a certain capacity, evict the least recently used cache item.

[0139] III. Reduce memory occupancy during list sliding by using lightweight native components:

[0140] During the list sliding process, the rendering of a large number of components will occupy a large amount of memory, resulting in unsmooth sliding. Using lightweight native components can effectively reduce memory occupancy and improve sliding performance. The following are the specific methods:

[0141] 1. Select appropriate components:

[0142] When building list items, choose lightweight native components. For example, for text display, give priority to using Text components and Span components, which are optimized in HarmonyOS and occupy less memory. Avoid using overly complex or redundant components to avoid increasing memory overhead.

[0143] 2. Component reuse:

[0144] When a list item slides off the screen during scrolling, the component is not destroyed immediately but reused. A component pool can be used to manage these reusable components. When a new list item needs to be rendered, the available component is obtained from the component pool and its data and style are updated. This can avoid frequent creation and destruction of components, reduce memory allocation and release operations, and thus reduce memory usage.

[0145] 3. Load on demand:

[0146] For some complex components or resources, adopt an on-demand loading strategy. For example, for rich text content containing images, load the images when the list items slide onto the screen, rather than loading all images when the list is initialized. This avoids loading a large number of resources simultaneously during the list sliding process, reducing memory pressure.

[0147] 4.Memory monitoring and optimization:

[0148] During the running of the application, memory usage is monitored in real time; when the memory usage is too high, corresponding optimization measures are taken, such as clearing the cache, releasing unused resources, etc.; the memory monitoring tool provided by Harmon yOS can be used to assist in memory management to ensure that the application maintains stable performance during the list sliding process.

[0149] In this embodiment, the implementation of highlight display includes:

[0150] Dynamically adjust the font color properties of the Span component based on business logic or keywords entered by the user;

[0151] By decoupling style attributes from rendering logic, flexible configuration of highlighting strategies is supported;

[0152] Specifically:

[0153] 1. Dynamically adjust the font color properties of the Span component based on business logic or user input keywords:

[0154] Keyword acquisition and analysis:

[0155] Business logic driven: In an application, the business logic pre-sets certain text patterns or content categories that need to be highlighted; for example, in a news application, the business logic may stipulate that all keywords related to breaking news, such as "breaking" and "urgent", need to be highlighted in the rich text of news titles displayed in a list; the system reads these keyword lists from a business rule database or a configuration file;

[0156] User input driven: Provide an interface for users to input keywords, such as entering the words they hope to highlight in the rich text list in a search box; when the user submits the input, the system parses the input content, removing unnecessary spaces, special characters and other interfering information to ensure accurate keywords are obtained;

[0157] Span component traversal and matching:

[0158] Based on the node data generated in step S2, a structure containing multiple Span components has been constructed during the rendering process; the system traverses all Span components in each list item to obtain the text content contained in each Span component;

[0159] Perform keyword matching operations on the text content of each Span component; adopt string matching algorithms, such as the naive string matching algorithm or the more efficient KMP (Knuth-Morris-Pratt) algorithm, etc., to compare the obtained keywords with the Span component text one by one; for example, if the keyword is "apple" and the text of a certain Span component is "I like to eat apples and bananas", then the Span component matches successfully;

[0160] Dynamic adjustment of font color attributes:

[0161] Once the text content of a certain Span component matches a keyword, the system immediately dynamically modifies the font color attribute of the Span component; in the native component system of Harmony OS, the Span component provides an API for setting the font color; for example, by calling a method like span.setTextColor(Color.YELLOW) (assuming span is an instance of the matched Span component and Color.YELLOW is the preset highlight color), the font color is adjusted to the preset highlight color, thus achieving the highlight display of the text where the keyword is located;

[0162] II. By decoupling the style attributes from the rendering logic, it supports flexible configuration of the highlighting strategy:

[0163] Independent storage and management of style attributes:

[0164] Create a dedicated style configuration file, which can be in formats such as JSON, XML, etc.; in the file, store various highlight style attributes independently; for example, define multiple color schemes for different business scenarios or user preference highlight requirements.

[0165] When the application starts, load this style configuration file and store it in a data structure in memory, such as a dictionary, for subsequent quick reading and use.

[0166] Separate the rendering logic from the style call:

[0167] In the rendering logic code, no longer directly hardcode style attributes; for example, in the previous code that adjusted the font color of the Span component based on keyword matching, no longer directly specify the color value, but instead reference the color in the style configuration through an intermediate variable.

[0168] When it is necessary to change the highlight strategy, such as changing from the default red highlight to a yellow highlight, only need to modify the corresponding color value in the style configuration file without modifying the rendering logic code; in this way, the rendering logic only responsible for determining the text range to be highlighted based on business logic or user input, while the specific values of the style attributes are determined by an independent configuration file.

[0169] Flexible configuration implementation:

[0170] Business scenario switching: In different business scenarios, the application can dynamically load different style configurations according to actual needs; for example, use a relatively soft highlight color in the daytime mode and switch to a higher contrast highlight color in the nighttime mode to improve readability; by modifying the name of the loaded style configuration file or switching different style configuration data structure references in memory, it is easy to achieve the switching of the highlight strategy in different business scenarios.

[0171] User customization: Provide users with the function of customizing highlight styles; users can, in the settings interface of the application, modify the relevant attribute values in the style configuration file through controls such as color pickers and font size adjustments; then, in the subsequent rendering process of the application, the highlight effect will be shown according to the user-customized style configuration, thus greatly improving the flexibility of the highlight strategy.

[0172] In this embodiment, the method further includes:

[0173] Introduce a state machine parser to handle nested tag structures and multi-level style inheritance relationships.

[0174] Define global default font size, color, and background parameters, and override local styles through global configuration to reduce duplicate code.

[0175] Specifically:

[0176] I. Introduce a state machine parser to handle nested tag structures and multi-level style inheritance relationships:

[0177] 1. Basic principle of the state machine parser:

[0178] The state machine parser is an algorithm based on state transition, used to process complex text structures and is very effective in parsing nested tag structures in rich text. It gradually parses the text by defining different states and transition rules between states, identifying the start and end of tags and the nested relationships between tags. At the same time, it can also handle multi-level style inheritance to ensure that child tags can correctly inherit the styles of parent tags;

[0179] 2. State definitions:

[0180] Initial state: The state when starting to parse rich text, waiting to encounter the first tag;

[0181] Tag start state: When the < symbol is parsed, enter this state to start identifying the tag name and attributes;

[0182] Tag attribute state: After the tag name is identified, enter this state to parse the attributes of the tag, such as style information in the style attribute;

[0183] Tag content state: When the > symbol is encountered, enter this state to start processing the text content wrapped by the tag;

[0184] Tag end state: When the < / symbol is parsed, enter this state to match the corresponding start tag and handle the tag end logic;

[0185] 3. State transition rules:

[0186] From the initial state, when the < symbol is encountered, transfer to the tag start state;

[0187] In the tag start state, after the tag name is identified, when an attribute is encountered, transfer to the tag attribute state; when the > symbol is encountered, transfer to the tag content state;

[0188] In the tag attribute state, after all attributes are processed, when the > symbol is encountered, transfer to the tag content state;

[0189] In the tag content state, when the < symbol is encountered, if it is a start tag, enter the new tag start state (nested tag situation); if it is an end tag, enter the tag end state;

[0190] In the tag end state, after matching the corresponding start tag, return to the previous state according to the nesting level;

[0191] 4. Handling nested tag structures:

[0192] When encountering nested tags, the state machine parser processes the child tags recursively; for example, for Hello , parsing until Enter the tag start state. After processing the attributes of the div tag, enter the tag content state, and then encounter Entering a new tag start state again, processing the p tag and its content, and finally encountering Return to the content state of the div tag and then encounter the entire tag structure is parsed;

[0193] During the processing, a stack is used to record the current tag hierarchy. Whenever a start tag is encountered, it is pushed onto the stack, and when an end tag is encountered, the corresponding start tag is popped from the stack to ensure the correct nesting relationship of the tags;

[0194] 5. Handling multi-level style inheritance relationships:

[0195] When parsing tag attributes, style information is extracted; when encountering nested tags, the child tags inherit some styles from the parent tags; for example, if the parent tag div has style = "color:red; font-size:16px" and the child tag p does not define the color attribute, then the text inside the p tag inherits the color style of the div tag by default;

[0196] When the state machine parser processes each tag, it maintains a style stack. Whenever a new tag is entered, the style of this tag is merged with the style at the top of the stack (if there is an inheritance relationship), and when an end tag is encountered, the style of this tag is removed from the stack to ensure the correct inheritance and overriding relationships of the styles;

[0197] II. Define global default font size, color, and background parameters, and override local styles through global configuration to reduce duplicate code:

[0198] 1. Creation of the global style configuration module:

[0199] Create a global style configuration file, such as globalStyleConfig.json, to store the default font size, color, and background parameters;

[0200] When the application starts, load this configuration file and store it in a global variable in memory for subsequent access;

[0201] 2. Combination of local styles and global styles:

[0202] When parsing rich text to generate node data in step S2, each node may contain local style information; during the rendering process, for each node, its local style is applied first;

[0203] Then, check the global style configuration. If some style attributes (such as font size, color, or background color) are not defined in the local style, the default values in the global style are used. For example, if the font size is not defined in the local style of a certain node, the text of that node will use the defaultFontSize in the global configuration.

[0204] 3. Global configuration overrides local style:

[0205] To achieve the override of local style by global configuration, a switch mechanism or priority setting is provided.

[0206] When overrideLocalStyle is true, the global style will override the same properties in the local style. For example, if the font color in the local style is red, while the font color in the global configuration is black and overrideLocalStyle is true, the finally rendered font color will be black.

[0207] 4. Reduce duplicate code:

[0208] Through the global style configuration, avoid repeatedly defining the same style attributes in the local style of each node. For example, if multiple nodes need to use the same font size and color, just define them once in the global style, and these nodes can automatically inherit or be overridden to the global style, thus reducing code redundancy and improving code maintainability. When it is necessary to modify the global style, just modify the corresponding parameters in the global configuration file, and the styles of all affected nodes will be automatically updated.

[0209] Although the embodiments of the present invention have been shown and described, it will be understood by those of ordinary skill in the art that various changes, modifications, substitutions, and variations can be made therein without departing from the principles and spirit of the present invention, and the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for processing rich text highlighting shown in the following list of Harmony Next App, characterized in that: It includes the following steps: S1. Obtain rich text content containing HTML format tags; S2. Parse the rich text content containing HTML format tags to generate node data in a tree structure, where the node data includes text content and its corresponding style attributes; S3. Based on the node data, use Harmony OS native components for fine-grained rendering, and achieve high-light display by setting the general attributes of Harmony OS native components.

2. The method for processing rich text highlighting in the following list display of a Harmony Next App according to claim 1, wherein: The step of parsing the rich text content containing HTML format tags includes: Match the tags and text content in the rich text containing HTML format tags through specific rules. The specific rules are as follows: Match the start tag that starts with a left angle bracket, followed by a tag name composed of non-right angle bracket characters, and ends with a right angle bracket; Match the text content composed of non-left angle bracket characters after the start tag. This text content is an optional item; Match the end tag that starts with a left angle bracket and a slash, followed by a tag name composed of non-right angle bracket characters, and ends with a right angle bracket; Extract the custom style attributes in the tag, and associate and store the custom style attributes with the text content in the node data of the tree structure; Introduce a dynamic weight distribution algorithm to optimize the tag parsing priority. The dynamic weight distribution algorithm calculates the tag parsing weight through the following logic: The parsing weight of a tag is obtained by the weighted sum of the complexity factor and the nesting depth. The complexity factor is the ratio of the number of attributes of the tag to the preset maximum number of attributes plus the logarithm to the base 2 of the nesting level number of the tag plus 1. The nesting depth is the nesting level number of the tag; The sum of the weight coefficients of the complexity factor and the nesting depth is 1, and the default values are 0.7 and 0.3 respectively.

3. A method for processing rich text highlighting in the following list display of a Harmony Next App according to claim 2, characterized in that: In step S2, a node similarity merging algorithm is introduced to optimize the tag parsing priority. Its logic is: Calculate the style similarity of two node data, specifically the ratio of the number of common style attributes of the two node data to the number of all style attributes of the two node data; When the ratio is greater than or equal to 0.8, merge the two node data to reduce redundant data.

4. A method for processing rich text highlighting in the following list display of a Harmony Next App according to claim 1, characterized in that: The Harmony OS native components include a Text component and a Span component, where: The Text component serves as the parent container for hosting multiple Span sub-components; The Span component dynamically sets at least one of the font color, font size, or background color according to the style attributes in the node data of the tree structure to achieve high-light display.

5. A method for processing rich text highlighting in the following list display of a Harmony Next App according to claim 1, characterized in that: It also includes: During the list rendering process, directly embed the parsed node data into the list item template to avoid repeated parsing of the same rich text content; Reduce the real-time rendering calculation overhead through a pre-parsing and caching mechanism, and reduce the memory occupancy during list sliding through lightweight native components.

6. The method for processing rich text highlighting in the following list display of a Harmony Next App according to claim 1, characterized in that: The implementation of the high-light display includes: Dynamically adjust the font color attribute of the Span component according to the business logic or keywords input by the user; Support flexible configuration of the high-light strategy through the decoupling of style attributes and rendering logic.

7. A method for processing rich text highlighting in the following list display of a Harmony Next App according to claim 1, characterized in that: It also includes: Introduce a state machine parser to handle nested tag structures and multi-level style inheritance relationships; Define global default font size, color, and background parameters, and override local styles through global configuration to reduce duplicate code.

Images