Front-end comparison method based on visualization technology

Abstract

The invention discloses a front-end comparison method based on a visualization technology, and the method comprises the steps: analyzing a demand, and determining the types of files which can be imported; defining a comparison algorithm according to the types of the imported files; defining a detailed comparison rule according to the comparison algorithm; integrating the comparison rule to a rule display area, and displaying the conversion rule; defining a rule base for the rules according to a unified rule; the method comprises the following steps: importing a file to be compared, decomposing the file into a series of marks, combining the marks into a structure, and constructing the structure to form an AST structure; when the text coding formats on the two sides are inconsistent, the user selects whether to modify the file coding format or the text format, and if modification is selected, the text format is converted according to a conversion function; automatically matching a rule base according to the text format; creating a display rule based on echarts; and defining an export library according to requirements. And operation on differentiated contents is supported.

Description

Technical Field

[0001] The present invention relates to the field of information data, and in particular to a front-end comparison method based on visualization technology. Background Art

[0002] With the advent of the information age, a large amount of text data and information data are transmitted and stored on the Internet. However, for users, how to quickly and effectively compare and find the differences between different data has become an important requirement. Traditional text comparison methods often only provide simple difference marks and lack intuitive visual display, making it difficult for users to quickly understand the comparison results.

[0003] Existing v-code-diff, vue-codemirror, etc. provide simple text content comparison and highlight different content. Both tools are introduced into the project by installing dependencies, importing relevant files, and performing differential comparison.

[0004] The existing technologies only provide simple text comparison content and highlight the differentiated text. They cannot merge or save differentiated texts, nor can they count and display the number of differences or the main differences. Moreover, when the text content is too much or too large, the existing tools usually render very slowly and sometimes crash. Summary of the invention

[0005] In view of the above problems, the present invention is proposed to provide a front-end comparison method based on visualization technology that overcomes the above problems or at least partially solves the above problems.

[0006] According to one aspect of the present invention, a front-end comparison method based on visualization technology is provided, and the front-end comparison method comprises:

[0007] Analyze requirements and determine the types of files that can be imported;

[0008] Define the comparison algorithm based on the type of imported files;

[0009] defining detailed comparison rules according to the comparison algorithm;

[0010] Integrate the comparison rules into the rule display area to display the conversion rules;

[0011] Define the rules into a unified rule base;

[0012] Import the file to be compared, decompose the file into a series of tags, combine them into a structure, and construct the structure to form an AST structure;

[0013] When the text encoding formats on both sides are inconsistent, the user chooses whether to modify the file encoding format or text format. If modification is selected, the text format is converted according to the conversion function;

[0014] According to the text format, the rule library is automatically matched and the AST structure is traversed using a recursive function;

[0015] Create display rules based on echarts;

[0016] The user chooses whether to merge or edit the current differential text. If the user chooses to modify, the built-in code editor is opened to operate the code.

[0017] Define the export library according to the requirements. The export library provides the text export function in word, excel and pdf formats through the Apache POI tool.

[0018] Optionally, the file types specifically include: code type and text type.

[0019] Optionally, defining a comparison algorithm according to the type of the imported file specifically includes:

[0020] UTF-8 comparison algorithms, including byte-by-byte comparison algorithm, text content-based comparison algorithm, and difference algorithm;

[0021] GBK comparison algorithm, including: byte-by-byte comparison algorithm, difference algorithm, and MD5 hash algorithm;

[0022] Word comparison algorithms, including: cosine similarity-based algorithms, TF-IDF-based algorithms, and word vector-based algorithms;

[0023] Excel comparison algorithm, including: using formula comparison algorithm, using positioning comparison algorithm, and using Excel function comparison.

[0024] Optionally, the defining a detailed comparison rule according to the comparison algorithm specifically includes:

[0025] Compare two byte sequences to see if they are exactly the same, and complete the comparison of UTF-8 Chinese characters;

[0026] Determine whether the character values ​​of two bytes are the same and complete the GBK English character comparison;

[0027] Determine whether the paragraph alignment, indentation, and line spacing settings are the same, complete the Word text paragraph comparison, and use the EXACT function and IF function to compare the table content.

[0028] Optionally, defining a rule base according to a unified rule specifically includes: defining a rule base as a UTF-8 rule base, a GBK rule base, a word rule base and an excel rule base.

[0029] Optionally, the importing of the file to be compared, decomposing the file into a series of tags, combining the tags into a structure, and constructing the structure to form an AST structure specifically includes:

[0030] Import the file to be compared and decompose it into a series of tags, including attribute names and text nodes;

[0031] Identify the start and end tags, associate them with the corresponding element nodes, combine them into a meaningful structure, build the structure, and form an AST structure.

[0032] Optionally, the automatic matching of the rule base according to the text format and the traversal of the AST structure using a recursive function specifically include:

[0033] According to the text format, the rule base is automatically matched, and the AST structure is traversed using a recursive function to traverse to the node corresponding to the rule in the rule base;

[0034] The comparison is performed based on the rules and node types, and the text is read in blocks during the comparison.

[0035] Optionally, the export library is defined according to the demand, and the export library provides the text export function in word, excel, and pdf formats through the Apache POI tool, and further includes: the user selects the text format of exporting the comparison result, and the file is exported and saved.

[0036] The present invention provides a front-end comparison method based on visualization technology, the front-end comparison method comprising: analyzing requirements, determining the types of files that can be imported; defining a comparison algorithm according to the types of files imported; defining detailed comparison rules according to the comparison algorithm; integrating the comparison rules into a rule display area, and displaying the conversion rules; defining a rule library according to a unified rule; importing the files to be compared, decomposing the files into a series of tags, combining them into a structure, and constructing the structure to form an AST structure; when the text encoding formats on both sides are inconsistent, the user chooses whether to modify the file encoding format or the text format, and if the modification is selected, the text format is converted according to the conversion function; according to the text format, the rule library is automatically matched, and the AST structure is traversed using a recursive function; display rules are created based on echarts; the user chooses whether to merge and edit the current differential text, and if the modification is selected, the built-in code editor is opened to operate the code; according to the requirements, an export library is defined, and the export library provides a text export function in word, excel, and pdf formats through the Apache POI tool. Support operations on differential content, such as merging, deleting, and modifying.

[0037] The above description is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, it can be implemented according to the contents of the specification. In order to make the above and other purposes, features and advantages of the present invention more obvious and easy to understand, the specific implementation methods of the present invention are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying creative work.

[0039] Figure 1 A flowchart of a front-end comparison method based on visualization technology provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0040] The exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although the exemplary embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be limited by the embodiments set forth herein. On the contrary, these embodiments are provided to enable a more thorough understanding of the present disclosure and to fully convey the scope of the present disclosure to those skilled in the art.

[0041] The terms "comprises" and "having" and any variations thereof in the description embodiments, claims and drawings of the present invention are intended to cover non-exclusive inclusions, for example, including a series of steps or units.

[0042] The technical solution of the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments.

[0043] like Figure 1 As shown, a front-end comparison method based on visualization technology includes:

[0044] (1) Analyze the requirements and determine the types of files that can be imported, including code (html, css, js, vue, etc.) and text (word, excel);

[0045] (2) Define comparison algorithms based on the type of imported files, such as UTF-8 comparison algorithm (byte-by-byte comparison algorithm, text content-based comparison algorithm, difference algorithm), GBK comparison algorithm (byte-by-byte comparison algorithm, difference algorithm, MD5 hash algorithm), word comparison algorithm (cosine similarity-based algorithm, TF-IDF-based algorithm, word vector-based algorithm), and Excel comparison algorithm (using formula comparison algorithm, using positioning comparison algorithm, and using Excel function comparison);

[0046] (3) Detailed comparison rules are defined according to the algorithm, such as comparing the two byte sequences to see if they are exactly the same, thus completing the comparison of UTF-8 Chinese characters, comparing the GBK English characters by judging whether the character values ​​of the two bytes are the same, comparing the Word text paragraphs by judging whether the paragraph alignment, indentation, line spacing and other typesetting settings are the same, and comparing the table contents using the EXACT function and the IF function;

[0047] (4) Integrate the above rules into the rule display area to display the conversion rules;

[0048] (5) Define the rule base according to unified standards, such as scientific rationality, rule consistency, and rule extensibility. Specifically, it is defined as UTF-8 rule base, GBK rule base, word rule base, and excel rule base;

[0049] (6) Import the file to be compared, decompose the file into a series of tags, such as attribute names, text nodes, etc., then identify the start tag and end tag, and associate them with their corresponding element nodes to form a meaningful structure, and finally build these structures to form an AST structure;

[0050] (7) When the text encoding formats on both sides are inconsistent, the user chooses whether to modify the file encoding format or text format. If modification is selected, the text format is converted according to the conversion function;

[0051] (8) According to the text format, the rule base is automatically matched, and the AST structure is traversed using a recursive function to traverse to the node corresponding to the rule in the rule base, and the rules and node types are compared. When comparing, the text is read in blocks to improve efficiency;

[0052] (9) Create display rules based on echarts, such as highlighting missing parts in orange and different parts in red. It also provides a personalized definition entry and pie chart and bar chart display formats. By default, the differentiated text is highlighted and the differentiated quantity is displayed in a table at the end of the text. Users can choose the display style, such as pie chart or bar chart;

[0053] (10) The user can choose whether to merge, edit, or perform other operations on the current differential text. If the user chooses to modify, the built-in code editor (sublime text) is opened to operate the code.

[0054] (11) Define the export library according to the requirements. The export library provides the text export function in word, excel, and pdf formats through the Apache POI tool. Users can choose the text format of the comparison results to export and save the files.

[0055] Beneficial effects:

[0056] (1) The visual interface displays rules intuitively to improve user experience;

[0057] (2) Provide enterprises and individuals with more convenient and efficient text comparison tools to improve work efficiency;

[0058] (3) Reduce maintenance costs through simple operation and configuration;

[0059] (4) Improve the operability of text comparison operations;

[0060] (5) It uses browser-based technology, allowing users to compare anytime and anywhere without the need for separate installation;

[0061] (6) It supports users’ text comparison needs in many aspects, allowing users to not only modify but also view and download reports.

[0062] The above specific implementation methods further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific implementation methods of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A front-end comparison method based on visualization technology, It is characterized in that The front-end comparison method comprises: Analyze requirements and determine the types of files that can be imported; Define the comparison algorithm based on the type of imported files; defining detailed comparison rules according to the comparison algorithm; Integrate the comparison rules into the rule display area to display the conversion rules; Define the rules into a unified rule base; Import the file to be compared, decompose the file into a series of tags, combine them into a structure, and construct the structure to form an AST structure; When the text encoding formats on both sides are inconsistent, the user chooses whether to modify the file encoding format or text format. If modification is selected, the text format is converted according to the conversion function; According to the text format, the rule library is automatically matched and the AST structure is traversed using a recursive function; Create display rules based on echarts; The user chooses whether to merge or edit the current differential text. If the user chooses to modify, the built-in code editor is opened to operate the code. Define the export library according to the requirements. The export library provides the text export function in word, excel and pdf formats through the Apache POI tool.

2. According to the front-end comparison method based on visualization technology described in claim 1, It is characterized in that The file types specifically include: code type and text type.

3. According to the front-end comparison method based on visualization technology described in claim 1, It is characterized in that Defining the comparison algorithm according to the type of the imported file specifically includes: UTF-8 comparison algorithms, including byte-by-byte comparison algorithm, text content-based comparison algorithm, and difference algorithm; GBK comparison algorithm, including: byte-by-byte comparison algorithm, difference algorithm, and MD5 hash algorithm; Word comparison algorithms, including: cosine similarity-based algorithms, TF-IDF-based algorithms, and word vector-based algorithms; Excel comparison algorithm, including: using formula comparison algorithm, using positioning comparison algorithm, and using Excel function comparison.

4. According to the front-end comparison method based on visualization technology described in claim 1, It is characterized in that Defining detailed comparison rules according to the comparison algorithm specifically includes: Compare two byte sequences to see if they are exactly the same, and complete the comparison of UTF-8 Chinese characters; Determine whether the character values ​​of two bytes are the same and complete the GBK English character comparison; Determine whether the paragraph alignment, indentation, and line spacing settings are the same, complete the Word text paragraph comparison, and use the EXACT function and IF function to compare the table content.

5. According to claim 1, a front-end comparison method based on visualization technology, It is characterized in that Defining the rules into a rule base according to a unified rule specifically includes: defining a rule base, which is defined as a UTF-8 rule base, a GBK rule base, a word rule base and an excel rule base.

6. A front-end comparison method based on visualization technology according to claim 1, It is characterized in that The step of importing the file to be compared, decomposing the file into a series of tags, combining the tags into a structure, and constructing the structure to form an AST structure specifically includes: Import the file to be compared and decompose it into a series of tags, including attribute names and text nodes; Identify the start and end tags, associate them with the corresponding element nodes, combine them into a meaningful structure, build the structure, and form an AST structure.

7. The front-end comparison method based on visualization technology according to claim 1, It is characterized in that The automatic matching rule base according to the text format and the traversal of the AST structure using a recursive function specifically include: According to the text format, the rule base is automatically matched, and the AST structure is traversed using a recursive function to traverse to the node corresponding to the rule in the rule base; The comparison is performed based on the rules and node types, and the text is read in blocks during the comparison.

8. The front-end comparison method based on visualization technology according to claim 1, It is characterized in that The export library is defined according to the requirements. The export library provides the text export function in word, excel and pdf formats through the Apache POI tool, and further includes: the user selects the text format of the export comparison result to export and save the file.

Images