Data comparison and equal-height mark rendering method based on HTML (Hypertext Markup Language)

Abstract

The invention provides an HTML (Hypertext Markup Language)-based data comparison and equal-height mark rendering method, which relates to the technical field of computers, and comprises the following steps of: S1, defining the left as new-version data and the right as old-version data, and generating unique data UID (Unique Identifier) for effective element tags of an original HTML (Hypertext Markup Language); s2, converting the HTML data into a standard comparison structure data object; and S3, for the standard data structure object, generating a unique comparison data ID according to the HTML tag hierarchy. According to the method, the accuracy of HTML comparison is improved, a more accurate HTML data comparison result is provided, the same-frequency equal-height data is realized, the change of the HTML data can be carefully captured and displayed, the difference between different data can be more easily distinguished and understood through the change of color, height or other visual elements, and the equal-height data viewing function is realized; and the user can also intuitively preview and understand the specific content and influence of the data change.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a data comparison and equal-height mark rendering method based on HTML. Background Art

[0002] With the rapid advancement of Internet technology, data has become the core foundation of modern social operations. From corporate decision-making to personal life, data collection, analysis and visualization are becoming increasingly important. Especially in the era of big data and cloud computing, how to efficiently compare, analyze and present data to make it easy to understand has become a technical problem that needs to be solved urgently. Data comparison technology, especially comparison of structured data, is a key link to ensure data accuracy and consistency and support decision-making.

[0003] Currently, the industry has developed a variety of data comparison methods and technologies, ranging from simple text comparison to complex database synchronization. However, most existing technologies face many challenges when processing large-scale, complex structured data. Traditional data comparison tools usually focus on differences at the text level and it is difficult to intuitively display the relationships and trends between data. Especially on large-scale data sets, their efficiency and effectiveness are not ideal.

[0004] For structured data in the form of tables, lists, charts, etc., existing comparison methods are difficult to accurately capture and express subtle changes in the data, especially when the data format, layout or hierarchical structure changes. Many data comparison tools focus on technical implementation and ignore user experience, which makes it difficult for non-professional users to quickly understand and operate, limiting the popularization and application of data comparison technology. At the same time, although a variety of data comparison implementation methods have been proposed in the existing market, in-depth research on HTML data comparison is still insufficient, resulting in poor results of these methods when processing HTML data comparison. In addition, existing comparison methods usually only identify the changed part of the data, but do not perform related operations such as data equal height display on the comparison results, so users cannot intuitively preview data changes.

[0005] Therefore, there is an urgent need for a solution that can balance technical depth and user-friendliness to enhance the application value and popularity of data comparison technology, thereby reducing the working hours of practitioners, optimizing the comparison process, and improving work efficiency. Summary of the invention

[0006] The invention provided by the present invention aims to provide a data comparison and equal-height mark rendering method based on HTML. The accuracy of HTML comparison is improved, more accurate HTML data comparison results are provided, and data is equal in frequency and height. The changes of HTML data can be captured and displayed in detail, and the differences between different data can be distinguished and understood more easily through changes in color, height or other visual elements. The data equal-height viewing function is realized, and key information can be quickly captured even in the face of a large amount of data. Users can also intuitively preview and understand the specific content and impact of data changes.

[0007] In order to solve the above problem, the present invention provides the following technical solution: a data comparison and equal height mark rendering method based on HTML, comprising the following steps:

[0008] Step 1: Define the left side as the new version of data and the right side as the old version of data, and generate a unique data UID for the valid element tag of the original HTML.

[0009] Step 2: Convert HTML data into a standard comparison structure data object.

[0010] Step 3: Generate a unique comparison data ID for the standard data structure object according to the HTML tag level.

[0011] Step 4: Implement version difference statistics based on the changes in data ID and data content between the two versions.

[0012] Step 5: Mark the changed UIDs on the left and right sides, and obtain the UID of the previous adjacent element of the element to be inserted on the left and right sides of the newly added or deleted object.

[0013] Step 6: Render the modified content on the page and obtain the corresponding tags for adding and deleting. Set the height of the corresponding tags for the left and right data and insert them into the corresponding positions to achieve equal height of the data.

[0014] Furthermore, the specific steps of step one are as follows:

[0015] S101: Determine whether an HTML element tag is a node element, and generate a unique UID for the node element.

[0016] Furthermore, the specific steps of step 2 are as follows:

[0017] S201: Initialize standard comparison structure data object;

[0018] S202: Loop through all element tags and element attributes of HTML data, and filter out element attributes that do not need to be compared;

[0019] S203: Process all node elements and all non-node elements;

[0020] S204: Obtain the UID set in step S101 as the HTML original data identifier, and assign it to the comparison structure data object.

[0021] Further, in step S203, when processing the node elements, the node elements are assigned as labels and attributes to the comparison structure data object, and when processing the non-node elements, the non-node elements are assigned as contents to the comparison structure data object.

[0022] Furthermore, the specific steps of step three are as follows:

[0023] S301: looping through the standard comparison structure data object;

[0024] S302: Obtaining the attributes of all standard comparison structure data objects;

[0025] S303: For a standard data object, if there is a version ID in the element attribute, collect the element ID and concatenate it with the label to ensure that the comparison data object ID is unique;

[0026] S304: if there are multiple data comparison objects with the same label under one object, add a data position identifier after the ID generated in step S303 according to the order of elements in the structure data to ensure that the comparison data object ID is unique;

[0027] S305: According to the level of the standard comparison structure data object, the unique identification ID of the comparison structure data object generated in the previous level is concatenated with the identification generated in step S303 and step S304 to form the unique identification ID of the current standard comparison structure data object.

[0028] Furthermore, the specific steps of step 4 are as follows:

[0029] S401: loop through the two comparison data objects on the left and right, and store the standard data objects in their corresponding MAPs respectively;

[0030] S402: Acquire data with the same ID in the left and right MAPs, and further compare the differences in specific contents;

[0031] S403: Acquire data that only exists in the left or right MAP. According to the definition, the left side is determined to be newly added data. Therefore, the data that only exists in the left MAP is the newly added data, and the data that only exists in the right MAP is the deleted data.

[0032] S404: Count all the modified, added, and deleted data obtained in the above steps.

[0033] Furthermore, the specific steps of step five are as follows:

[0034] S501: Based on the data changed in step S404, obtain the UIDs of the left and right data, match the corresponding UID elements in the original HTML, and set the element attribute value to change;

[0035] S502: Based on the newly added data in step S404, obtain the UID of the left data, match the corresponding UID element in the original HTML, and set the element attribute value to add;

[0036] S503: Based on the data deleted in step S404, obtain the UID of the data on the right, match the corresponding UID element in the original HTML, and set the element attribute value to delete;

[0037] S504: To achieve the same height of the newly added data on the left, the corresponding position on the right needs to be found, and the ID of the previous data of the newly added data on the left is obtained in a loop, and the same ID data on the right is matched until the UID is found or the previous element UID does not exist. At this time, the element position on the right that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID;

[0038] S505: Similarly, in order to achieve the same height of the deleted data on the right, the corresponding position on the left must be found, and the ID of the previous data on the right must be obtained in a loop. Match whether there is data with the same ID on the left until the UID is found or the previous element UID does not exist. At this time, the element position on the left that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID.

[0039] Furthermore, in step S504, if the same ID data exists on the right, the corresponding data UID on the right is returned; if the same ID data does not exist on the right, the current step is continued; in step S505, if the same ID data exists on the left, the corresponding data UID on the left is returned; if the same ID data does not exist on the left, the current step is continued.

[0040] Furthermore, the specific steps of step six are as follows:

[0041] S601: Based on the data modification result obtained in step S5, a blue background color is added to the elements with the attribute of change in the HTML on the left and right sides to mark them as data modification;

[0042] S602: Based on the data addition result obtained in step S5, add a green background color to the element with the attribute of add in the left HTML, mark it as new data, and obtain the equal height position UID returned in step S504, obtain the element label and label height style on the left to generate a new element;

[0043] S603: Similarly, based on the deletion result obtained in step S5, a red background color is added to the element with the attribute of change in the HTML on the right to mark it as deleted data. At the same time, the equal height position UID returned in step S504 is obtained, and the element label and label height style on the right are obtained to generate a new element.

[0044] Furthermore, in step S602, if the UID exists, the element is added to the first position after the element corresponding to the UID on the right; if the UID does not exist, the element is added to the first position under the corresponding parent node element; in step S603, if the UID exists, the element is added to the first position after the element corresponding to the UID on the right; if the UID does not exist, the element is added to the first position under the corresponding parent node element.

[0045] The present invention provides a data comparison and contour mark rendering method based on HTML, which has the following beneficial effects: improving the accuracy of HTML comparison, providing more accurate HTML data comparison results, achieving data isochronous frequency and isochronous height, being able to capture and display changes in HTML data in detail, and making it easier to distinguish and understand the differences between different data through changes in color, height or other visual elements, achieving data isochronous height viewing function, being able to quickly capture key information even in the face of large amounts of data, and users being able to intuitively preview and understand the specific content and impact of data changes. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] Figure 1 A flowchart of a data comparison and contour mark rendering method based on HTML according to the present invention;

[0047] Figure 2 A data comparison and contour rendering flow chart provided for an implementation example of a data comparison and contour mark rendering method based on HTML of the present invention;

[0048] Figure 3 The latest HTML original data graph provided for an implementation example of a data comparison and contour mark rendering method based on HTML of the present invention;

[0049] Figure 4 A historical HTML original data graph provided for an implementation example of an HTML-based data comparison and contour mark rendering method of the present invention;

[0050] Figure 5 The latest standard comparison object data diagram provided for an implementation example of a data comparison and contour mark rendering method based on HTML of the present invention;

[0051] Figure 6A historical standard comparison object data graph provided for an implementation example of an HTML-based data comparison and contour mark rendering method of the present invention;

[0052] Figure 7 A comparison contour rendering effect diagram is provided for an implementation example of an HTML-based data comparison and contour mark rendering method of the present invention. DETAILED DESCRIPTION

[0053] See also Figure 1 The present invention provides a technical solution: a data comparison and contour mark rendering method based on HTML, comprising the following steps:

[0054] Step 1: Define the new version data on the left and the old version data on the right, and generate a unique data UID for the valid element tags of the original HTML.

[0055] Step 2: Convert HTML data into a standard comparison structure data object.

[0056] Step 3: Generate a unique comparison data ID for the standard data structure object according to the HTML tag level.

[0057] Step 4: Implement version difference statistics based on the changes in data ID and data content between the two versions.

[0058] Step 5: Mark the changed UIDs on the left and right sides, and obtain the UID of the previous adjacent element of the element to be inserted on the left and right sides of the newly added or deleted object.

[0059] Step 6: Render the modified content on the page and obtain the corresponding tags for adding and deleting. Set the height of the corresponding tags for the left and right data and insert them into the corresponding positions to achieve equal height of the data.

[0060] Specifically, the specific steps of step one are as follows:

[0061] S101: Determine whether an HTML element tag is a node element, and generate a unique UID for the node element.

[0062] Specifically, the specific steps of step 2 are as follows:

[0063] S201: Initialize standard comparison structure data object;

[0064] S202: Loop through all element tags and element attributes of HTML data, and filter out element attributes that do not need to be compared;

[0065] S203: Process all node elements and all non-node elements;

[0066] S204: Obtain the UID set in step S101 as the HTML original data identifier, and assign it to the comparison structure data object.

[0067] Specifically, in step S203, when processing the node elements, the node elements are assigned as labels and attributes to the comparison structure data object, and when processing the non-node elements, the non-node elements are assigned as contents to the comparison structure data object.

[0068] Specifically, the specific steps of step three are as follows:

[0069] S301: looping through the standard comparison structure data object;

[0070] S302: Obtaining the attributes of all standard comparison structure data objects;

[0071] S303: For a standard data object, if there is a version ID in the element attribute, collect the element ID and concatenate it with the label to ensure that the comparison data object ID is unique;

[0072] S304: if there are multiple data comparison objects with the same label under one object, add a data position identifier after the ID generated in step S303 according to the order of elements in the structure data to ensure that the comparison data object ID is unique;

[0073] S305: According to the level of the standard comparison structure data object, the unique identification ID of the comparison structure data object generated in the previous level is concatenated with the identification generated in step S303 and step S304 to form the unique identification ID of the current standard comparison structure data object.

[0074] Specifically, the specific steps of step 4 are as follows:

[0075] S401: loop through the two comparison data objects on the left and right, and store the standard data objects in their corresponding MAPs respectively;

[0076] S402: Acquire data with the same ID in the left and right MAPs, and further compare the differences in specific contents;

[0077] S403: Acquire data that only exists in the left or right MAP. According to the definition, the left side is determined to be newly added data. Therefore, the data that only exists in the left MAP is the newly added data, and the data that only exists in the right MAP is the deleted data.

[0078] S404: Count all the modified, added, and deleted data obtained in the above steps.

[0079] Specifically, the specific steps of step five are as follows:

[0080] S501: Based on the data changed in step S404, obtain the UIDs of the left and right data, match the corresponding UID elements in the original HTML, and set the element attribute value to change;

[0081] S502: Based on the newly added data in step S404, obtain the UID of the left data, match the corresponding UID element in the original HTML, and set the element attribute value to add;

[0082] S503: Based on the data deleted in step S404, obtain the UID of the data on the right, match the corresponding UID element in the original HTML, and set the element attribute value to delete;

[0083] S504: To achieve the same height of the newly added data on the left, the corresponding position on the right needs to be found, and the ID of the previous data of the newly added data on the left is obtained in a loop, and the same ID data on the right is matched until the UID is found or the previous element UID does not exist. At this time, the element position on the right that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID;

[0084] S505: Similarly, in order to achieve the same height of the deleted data on the right, the corresponding position on the left must be found, and the ID of the previous data on the right must be obtained in a loop. Match whether there is data with the same ID on the left until the UID is found or the previous element UID does not exist. At this time, the element position on the left that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID.

[0085] Specifically, in step S504, if the same ID data exists on the right, the corresponding data UID on the right is returned; if the same ID data does not exist on the right, the current step is continued; in step S505, if the same ID data exists on the left, the corresponding data UID on the left is returned; if the same ID data does not exist on the left, the current step is continued.

[0086] Specifically, the specific steps of step six are as follows:

[0087] S601: Based on the data modification result obtained in step S5, a blue background color is added to the elements with the attribute of change in the HTML on the left and right sides to mark them as data modification;

[0088] S602: Based on the data addition result obtained in step S5, add a green background color to the element with the attribute of add in the left HTML, mark it as new data, and obtain the equal height position UID returned in step S504, obtain the element label and label height style on the left to generate a new element;

[0089] S603: Similarly, based on the deletion result obtained in step S5, a red background color is added to the element with the attribute of change in the HTML on the right to mark it as deleted data. At the same time, the equal height position UID returned in step S504 is obtained, and the element label and label height style on the right are obtained to generate a new element.

[0090] Specifically, in step S602, if the UID exists, the element is added to the first position after the element corresponding to the UID on the right; if the UID does not exist, the element is added to the first position under the corresponding parent node element; in step S603, if the UID exists, the element is added to the first position after the element corresponding to the UID on the right; if the UID does not exist, the element is added to the first position under the corresponding parent node element.

[0091] The method of the embodiment is used for detection and analysis, and compared with the prior art. It can be concluded that when the embodiment is used, the accuracy of HTML comparison is improved, a more accurate HTML data comparison result is provided, and data isochronous and equi-height can be achieved. The changes in HTML data can be captured and displayed in detail, and the differences between different data can be more easily distinguished and understood through changes in color, height or other visual elements. The data equi-height viewing function is achieved, and key information can be quickly captured even in the face of large amounts of data. Users can also intuitively preview and understand the specific content and impact of data changes.

[0092] The present invention provides a data comparison and contour mark rendering method based on HTML, comprising the following steps:

[0093] Step 1: For the two original HTML data input, the latest data on the left is defined as HTML_LEFT, and the historical data on the right is defined as HTML_RIGHT. The two data are traversed separately, and a UID is generated for each element node as a data identifier. A new document is generated to facilitate subsequent processing of change tags, including the HTML element data. The original HTML_LEFT content data on the left is as follows Figure 3 As shown, the original HTML_RIGHT content data on the right is as follows Figure 4 shown.

[0094] Step 2: Initialize the left HTML_LEFT data to the standard comparison structure data object DOC_LEFT, and initialize the right HTML_RIGHT data to the standard comparison structure data object DOC_RIGHT. The specific fields of the standard comparison structure data object are as follows:

[0095] Field Name Data Types Data Description id String DOC vs ID pI String DOC parent node ID preId String DOC previous node ID uid String HTML Identifier UID pUid String HTML parent node identifier UID preUid String HTML previous node ID UID name String HTML element tag name attributes Map<String,String> HTML element content children List <doc> < / doc> Standard comparison object sub-object list

[0096] Step 201: Loop through all element tags and element attributes of HTML data, and filter out element attributes that do not need to be compared.

[0097] Step 202: Process all node elements, and assign the node elements as labels and attributes to the NAME and ATTRIBUTES fields in the standard comparison structure data object respectively; process all non-node elements, and assign the non-node elements as content to the ATTRIBUTES field in the standard comparison structure data object.

[0098] Step 203: Obtain the UID set in step 101 as the HTML original data identifier, assign it to the UID field in the standard comparison structure data object, and set the PUID and PREUID values ​​of the current data.

[0099] Step 301: loop through the two left and right version standard comparison structure data objects DOC_LEFT and DOC_RIGHT respectively.

[0100] Step 302: Obtain the attributes ATTRIBUTES of all standard comparison structure data objects;

[0101] Step 303: For the standard data object, if the version ID exists in the attribute ATTRIBUTES of the comparison structure data object, the element IDs are collected and concatenated with the tags to ensure that the comparison data object ID is unique. The specific format is (ele[span-id]).

[0102] Step 304: If there are multiple data comparison objects with the same label under one object, the data location identifier is added after the ID generated in step 303 according to the order of elements in the structure data to ensure that the comparison data object ID is unique. The specific format is (ele[span-id]-1).

[0103] Step 305: According to the level of the standard comparison structure data object, the unique identification ID of the comparison structure data object generated in the previous layer is concatenated with the identification generated in steps 303 and 304 to form the unique identification ID of the current standard comparison structure data object. The specific format is (ele[div-1]-ele[span-id]-1). The specific generated left standard data object structure DOC_LEFT content data is as follows: Figure 5 As shown, the content data of the standard data object structure DOC_RIGHT on the right is as follows Figure 6 shown.

[0104] Step 401: loop through the two comparison data objects DOC_LEFT and DOC_RIGHT, use the comparison data ID as the key and the data object as the value, and store the standard data object into MAP_LEFT and MAP_RIGHT respectively.

[0105] Step 402: Obtain data with the same ID in MAP_LEFT and MAP_RIGHT, and further compare the differences in specific content using a Levenshtein Distance algorithm.

[0106] Step 403: Acquiring data that only exists in MAP_LEFT is new data; acquiring data that only exists in MAP_RIGHT is deleted data.

[0107] Step 404: Count all the modified, added, and deleted data obtained in the above steps.

[0108] Step 501: Based on the changed data in the statistical results of step 404, the UID of the comparison data object with the same ID in MAP_LEFT and MAP_RIGHT is obtained at the same time, the corresponding UID element tag in the original HTML_LEFT and HTML_RIGHT is queried and matched, and the element tag attribute value is added as change.

[0109] Step 502: Based on the newly added data in the statistical results of step 404, the UID of the comparison data object in MAP_LEFT is obtained at the same time, and the corresponding UID element tag in the original HTML_LEFT is searched and matched, and the element tag attribute value is added.

[0110] Step 503: Based on the deleted data in the statistical results of step 404, the UID of the ID comparison data object in MAP_RIGHT is obtained at the same time, the corresponding UID element tag in the original HTML_RIGHT is searched and matched, and the element tag attribute value is added as delete.

[0111] Step 504: In order to achieve the purpose of finding the corresponding position on the right side when the newly added data on the left HTML_LEFT is at the same height, loop to obtain the previous data ID of the newly added data on the left DOC_LEFT, that is, PREUID, and match whether there is the same ID data on the right DOC_RIGHT. If it exists, return the corresponding data UID of the right DOC_RIGHT. If not, continue to execute the current step until the UID is found or the previous element does not exist. At this time, the element position on the right HTML_RIGHT that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID.

[0112] Step 505: Similarly, in order to achieve the purpose of finding the corresponding position on the left side when deleting data on the right side, loop to obtain the previous data ID of the deleted data on the left DOC_RIGHT, that is, PREUID, and match whether there is the same ID data in the left DOC_LEFT. If it exists, return the corresponding data UID of the left DOC_LEFT. If not, continue to execute the current step until the UID is found or the previous element does not exist. At this time, the element position on the left DOC_LEFT that needs to be equal to is the first element position after the HTML element corresponding to the obtained UID.

[0113] Step 601: Based on the data modification result obtained in step 501, a blue background color is added to the elements with the attribute of change in the left HTML_LEFT and the right HTML_RIGHT to mark them as data modification.

[0114] Step 602: Based on the data addition result obtained in step 502, add a green background color to the element with the attribute add in the HTML_LEFT on the left to mark it as newly added data; at the same time, obtain the equal height position UID returned in step 504, obtain the left element label and label height style to generate a new element, if the UID exists, add the element to the first position after the element corresponding to the UID on the right, otherwise add the element to the first position under the corresponding parent node element.

[0115] Step 603: Similarly, according to the data deletion result obtained in step 503, add a red background color to the element with the attribute of delete in the HTML_RIGHT on the right to indicate that the data is deleted; at the same time, obtain the equal-height position UID returned in step 505, obtain the element label and label height style on the right to generate a new element. If the UID exists, add the element to the first position after the element corresponding to the UID on the right, otherwise add the element to the first position under the corresponding parent node element.

[0116] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.

Claims

1. A data comparison and contour mark rendering method based on HTML, characterized in that: The following steps are involved: S1: Define the new version data on the left and the old version data on the right, and generate a unique data UID for the valid element tags of the original HTML; S2: Convert HTML data into standard contrast structure data object; S3: Generate a unique comparison data ID for the standard data structure object according to the HTML tag level; S4: Implement version difference statistics based on the changes in data ID and data content between the two versions; S5: Mark the changed UIDs on the left and right sides, and obtain the UID of the previous adjacent element of the element to be inserted on the left and right sides of the newly added or deleted object; S6: Page rendering modifies the content and obtains the corresponding tags for adding and deleting. It sets the height of the corresponding tags for the left and right data and inserts them into the corresponding positions to achieve equal height of the data.

2. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: The specific steps of step S1 are as follows: S101: Determine whether an HTML element tag is a node element, and generate a unique UID for the node element.

3. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: The specific steps of step S2 are as follows: S201: Initialize standard comparison structure data object; S202: Loop through all element tags and element attributes of HTML data, and filter out element attributes that do not need to be compared; S203: Process all node elements and all non-node elements; S204: Obtain the UID set in step S101 as the HTML original data identifier, and assign it to the comparison structure data object.

4. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: In step S203, when processing the node elements, the node elements are assigned as labels and attributes to the comparison structure data object, and when processing the non-node elements, the non-node elements are assigned as contents to the comparison structure data object.

5. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: The specific steps of step S3 are as follows: S301: looping through the standard comparison structure data object; S302: Obtaining the attributes of all standard comparison structure data objects; S303: For a standard data object, if there is a version ID in the element attribute, collect the element ID and concatenate it with the label to ensure that the comparison data object ID is unique; S304: if there are multiple data comparison objects with the same label under one object, add a data position identifier after the ID generated in step S303 according to the order of elements in the structure data to ensure that the comparison data object ID is unique; S305: According to the level of the standard comparison structure data object, the unique identification ID of the comparison structure data object generated in the previous level is concatenated with the identification generated in step S303 and step S304 to form the unique identification ID of the current standard comparison structure data object.

6. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: The specific steps of step S4 are as follows: S401: loop through the two comparison data objects on the left and right, and store the standard data objects in their corresponding MAPs respectively; S402: Acquire data with the same ID in the left and right MAPs, and further compare the differences in specific contents; S403: Acquire data that only exists in the left or right MAP. According to the definition, the left side is determined to be newly added data. Therefore, the data that only exists in the left MAP is the newly added data, and the data that only exists in the right MAP is the deleted data. S404: Count all the modified, added, and deleted data obtained in the above steps.

7. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: The specific steps of step S5 are as follows: S501: Based on the data changed in step S404, obtain the UIDs of the left and right data, match the corresponding UID elements in the original HTML, and set the element attribute value to change; S502: Based on the newly added data in step S404, obtain the UID of the left data, match the corresponding UID element in the original HTML, and set the element attribute value to add; S503: Based on the data deleted in step S404, obtain the UID of the data on the right, match the corresponding UID element in the original HTML, and set the element attribute value to delete; S504: To achieve the same height of the newly added data on the left, the corresponding position on the right needs to be found, and the ID of the previous data of the newly added data on the left is obtained in a loop, and the same ID data on the right is matched until the UID is found or the previous element UID does not exist. At this time, the element position on the right that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID; S505: Similarly, in order to achieve the same height of the deleted data on the right, the corresponding position on the left must be found, and the ID of the previous data on the right must be obtained in a loop. Match whether there is data with the same ID on the left until the UID is found or the previous element UID does not exist. At this time, the element position on the left that needs to be equal in height is the first element position after the HTML element corresponding to the obtained UID.

8. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: In step S504, if the same ID data exists on the right, the corresponding data UID on the right is returned; if the same ID data does not exist on the right, the current step is continued; in step S505, if the same ID data exists on the left, the corresponding data UID on the left is returned; if the same ID data does not exist on the left, the current step is continued.

9. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: The specific steps of step S6 are as follows: S601: Based on the data modification result obtained in step S5, a blue background color is added to the elements with the attribute of change in the HTML on the left and right sides to mark them as data modification; S602: Based on the data addition result obtained in step S5, add a green background color to the element with the attribute of add in the left HTML, mark it as new data, and obtain the equal height position UID returned in step S504, obtain the element label and label height style on the left to generate a new element; S603: Similarly, based on the deletion result obtained in step S5, a red background color is added to the element with the attribute of change in the HTML on the right to mark it as deleted data. At the same time, the equal height position UID returned in step S504 is obtained, and the element label and label height style on the right are obtained to generate a new element.

10. The method for data comparison and contour mark rendering based on HTML according to claim 1, characterized in that: In step S602, if the UID exists, the element is added to the first position after the element corresponding to the UID on the right; if the UID does not exist, the element is added to the first position under the corresponding parent node element; in step S603, if the UID exists, the element is added to the first position after the element corresponding to the UID on the right; if the UID does not exist, the element is added to the first position under the corresponding parent node element.

Images