Method and device for automatically beautifying webpage content, storage medium and program product

Abstract

The embodiment of the invention discloses a method and device for automatically beautifying webpage content, a storage medium and a program product. The method comprises the steps that HTML content is obtained from a webpage, data extraction is conducted on the HTML content, a content assembly is obtained, and the content assembly comprises at least one of plain text content and media elements; constructing a rule set containing various style rules, performing style beautification on the content component based on the rule set, and generating HTML content with a new style; and dynamically assembling the HTML content with the new style to generate a target HTML document, and displaying the target HTML document in a webpage. According to the method, the traditional tedious manual style editing process can be simplified, the labor cost and the time cost are reduced, the style uniformity is improved, and the style requirement of a user is met.

Description

Technical Field

[0001] The present disclosure relates to the technical field of Web development, and in particular to a method, device, storage medium, and program product for automatically beautifying webpage content. Background Art

[0002] With the advent of the digital age, the Internet has become the main channel for information dissemination. Online editing, sharing and reading of documents on web pages are becoming increasingly popular. However, existing technologies have obvious deficiencies in handling the uniformity of text content across platforms and applications. When document content is copied and pasted between different platforms, inconsistent styles are often encountered, which not only leads to confusing article presentation, but also seriously affects the user's reading experience. In addition, although AI technology has made significant progress in content generation, the diversity of document styles generated by AI is often difficult to match with the unified requirements of enterprises. Summary of the invention

[0003] In view of this, the embodiments of the present disclosure provide a method, device, storage medium, and program product for automatically beautifying web page content, which can simplify the traditional cumbersome manual style editing process, reduce labor costs and time costs, improve style uniformity, and meet user style requirements.

[0004] In a first aspect, the embodiments of the present disclosure provide a method for automatically beautifying webpage content, which adopts the following technical solutions:

[0005] Obtaining HTML content from a web page, performing data extraction on the HTML content, and obtaining a content component, wherein the content component includes at least one of plain text content and a media element;

[0006] Building a rule set including multiple style rules, and performing style beautification on the content component based on the rule set to generate HTML content with a new style;

[0007] The HTML content with the new style is dynamically assembled to generate a target HTML document, and the target HTML document is displayed on a web page.

[0008] Optionally, the acquiring HTML content from the webpage, performing data extraction on the HTML content, and obtaining content components includes:

[0009] Build a DOM container;

[0010] Loading the HTML content from a web page;

[0011] Parsing the HTML content through the DOM container to generate a DOM tree;

[0012] Extracting HTML elements from the DOM tree, and storing the HTML elements into a collection;

[0013] Traverse the collection, extract the text content in the collection, and if there is a media element in the collection, extract the media element;

[0014] Preprocessing the text content, and wrapping the preprocessed text content with a preset DOM element to generate the plurality of plain text contents;

[0015] The plurality of plain text contents constitute the content component, or the plurality of plain text contents and the media element together constitute the content component;

[0016] The content components are stored in a cache array in the order in which they appear in the HTML content.

[0017] Optionally, the preprocessing includes at least one of removing leading and trailing spaces, merging consecutive line breaks, filtering sensitive words, and cleaning content.

[0018] Optionally, the preprocessing includes removing leading and trailing spaces, merging consecutive line breaks, filtering sensitive words, and cleaning content;

[0019] Wherein, removing leading and trailing spaces refers to removing leading and trailing spaces of the text content;

[0020] Merging consecutive line breaks refers to replacing consecutive line breaks in the text content with a single line break;

[0021] The sensitive word filtering refers to checking whether the text content contains sensitive words according to a preset sensitive word list. If sensitive words are found, the sensitive words are replaced with preset characters or deleted.

[0022] The content cleaning refers to splitting the text content into a text array according to a single line break, the text array contains multiple array elements, traversing the multiple array elements, deleting the leading and trailing spaces of the current array element, and detecting whether the current array element is empty after deleting the leading and trailing spaces;

[0023] If it is empty, delete the current array element;

[0024] If it is not empty, the current array element is retained, and the current array element is wrapped with a preset DOM element. The wrapped current array element is called plain text content. When multiple array elements are traversed, multiple plain text contents are obtained.

[0025] Optionally, the method for automatically beautifying webpage content further includes:

[0026] Perform security verification on the loaded HTML content, wherein the security verification includes at least one of data clearing, tag filtering, attribute checking, attribute value checking, deep filtering, entity escape processing, encoding processing, and CSP verification;

[0027] The data cleaning refers to receiving the input HTML content, cleaning the HTML content, and removing irrelevant blank characters and comments;

[0028] The tag filtering refers to traversing the tags in the HTML content after data cleaning and deleting the tags that are not in the whitelist;

[0029] The attribute check refers to checking whether the attribute of the tag in the whitelist is in the attribute list when traversing the tags in the HTML content. If the attribute is not in the attribute list, the attribute is deleted or the value of the attribute is replaced with a preset security value. If the attribute is in the attribute list, the attribute value is checked.

[0030] The attribute value check refers to URL encoding or HTML entity encoding of the attribute value;

[0031] The deep filtering refers to filtering malicious scripts from HTML content that passes attribute inspection and attribute value inspection;

[0032] The entity escape processing refers to performing HTML entity escape on the HTML content that has been deeply filtered;

[0033] The encoding process refers to encoding the HTML content after entity escape processing by using a security framework;

[0034] The CSP verification refers to implementing the content security policy on the server and the client, and verifying the encoded HTML content and all accompanying resources loaded with the web page according to the content security policy.

[0035] Optionally, the beautifying the content component based on the rule set to generate HTML content with a new style includes:

[0036] Identify all content elements in the content component and classify the content elements;

[0037] According to the type of the content element, matching a corresponding style rule for the content element from the rule set;

[0038] According to the matched style rules, several style classes are selected from the preset style set;

[0039] Using a template engine to combine the content element with the plurality of style classes to generate a content element with a new style;

[0040] Web typesetting is performed on all content elements with the new style to generate HTML content with the new style.

[0041] Optionally, the dynamically assembling the HTML content with the new style to generate a target HTML document, and displaying the target HTML document on a web page includes:

[0042] Using a preset data structure to store the HTML content with the new style;

[0043] Create a DocumentFragment object, add the content elements in the data structure to the DocumentFragment object, and generate a target HTML document;

[0044] Adopting an adaptive layout algorithm to adjust the layout of the target HTML document;

[0045] Display the target HTML document after layout adjustment on the web page.

[0046] In a second aspect, the embodiments of the present disclosure also provide a system for automatically beautifying webpage content, which adopts the following technical solutions:

[0047] A data extraction module, used to obtain HTML content from a web page, perform data extraction on the HTML content, and obtain content components, wherein the content components include at least one of plain text content and media elements;

[0048] A style beautification module, used to construct a rule set including multiple style rules, beautify the style of the content component based on the rule set, and generate HTML content with a new style;

[0049] The dynamic assembly module is used to dynamically assemble the HTML content with the new style, generate a target HTML document, and display the target HTML document in a web page.

[0050] In a third aspect, the embodiments of the present disclosure further provide a computer device, which adopts the following technical solution:

[0051] The computer device comprises:

[0052] at least one processor; and,

[0053] a memory communicatively connected to the at least one processor; wherein,

[0054] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute any of the above-mentioned methods for automatically beautifying web page content.

[0055] In a fourth aspect, an embodiment of the present disclosure further provides a computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable a computer to execute any of the above-mentioned methods for automatically beautifying web page content.

[0056] In a fifth aspect, an embodiment of the present disclosure further provides a computer program product, including a computer program / instruction, which implements the steps of any of the above methods when executed by a processor.

[0057] The method for automatically beautifying web page content provided by the embodiment of the present disclosure can automatically clear all styles of HTML content through data extraction, obtain content components, and by extracting HTML content in a web page and applying a unified style rule set, it can ensure that the text content copied between different platforms and applications maintains a consistent style, effectively solving the problem of inconsistent styles between different platforms, making the document presentation more neat and professional. Moreover, by automatically building and applying a style rule set, the content can be beautified according to the unified style requirements of the enterprise, ensuring that the articles or web page content generated by AI conform to the brand image and visual style of the enterprise, which makes the generated document style not only diverse, but also consistent with the standard requirements of the enterprise, and can eliminate the cumbersome steps of manually reapplying the style, greatly improving the maintenance efficiency of style uniformity, while avoiding errors and inconsistencies that may be caused by manual operations. By generating HTML content with a new style and dynamically assembling it, the target HTML document finally generated is more visually attractive, the user's reading experience will be significantly improved, and the style consistency and professionalism of the document will enhance the user's overall experience.

[0058] 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 in accordance with 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 following preferred embodiments are specifically cited and described in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0060] Figure 1 A flowchart of a method for automatically beautifying webpage content provided by an embodiment of the present disclosure;

[0061] Figure 2 A flowchart of a data extraction method provided by an embodiment of the present disclosure;

[0062] Figure 3 A schematic diagram of a flow chart of a style beautification method provided in an embodiment of the present disclosure;

[0063] Figure 4 A schematic diagram of a flow chart of a dynamic rendering method provided by an embodiment of the present disclosure;

[0064] Figure 5 A principle block diagram of a system for automatically beautifying webpage content provided by an embodiment of the present disclosure;

[0065] Figure 6 A schematic diagram of the structure of a computer device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0066] The embodiments of the present disclosure are described in detail below with reference to the accompanying drawings.

[0067] It should be clear that the following embodiments of the present disclosure are described by specific specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that the following embodiments and features in the embodiments can be combined with each other in the absence of conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present disclosure.

[0068] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.

[0069] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present disclosure. The drawings only show components related to the present disclosure rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0070] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.

[0071] Reference Figure 1 The present disclosure provides a method for automatically beautifying webpage content, comprising the following steps:

[0072] S1: Obtain HTML content from a web page, extract data from the HTML content, and obtain content components, where the content components include at least one of plain text content and media elements;

[0073] S2: Build a rule set containing multiple style rules, beautify the content components based on the rule set, and generate HTML content with new styles;

[0074] S3: Dynamically assemble the HTML content with the new style, generate a target HTML document, and display the target HTML document on the web page.

[0075] Although existing document processing software and online editors provide the function of clearing formatting, these functions are usually limited to specific environments, and after clearing the original style, users need to manually reapply the style, which is cumbersome and inefficient. Although machine learning and natural language processing technologies make it possible to automatically analyze text content and recommend matching visual styles, such technologies are not widely used in the field of article style beautification, especially in the rapid generation of document styles that meet the personalized needs of users or enterprises.

[0076] The method for automatically beautifying web page content disclosed in the present invention can automatically clear all styles of HTML content through data extraction, obtain content components, and by extracting HTML content in a web page and applying a unified style rule set, it can ensure that the text content copied between different platforms and applications maintains a consistent style, effectively solving the problem of inconsistent styles between different platforms, making the document presentation more neat and professional. Moreover, by automatically building and applying a style rule set, the content can be beautified according to the unified style requirements of the enterprise, ensuring that the articles or web page content generated by AI conform to the brand image and visual style of the enterprise, which makes the generated document style not only diverse, but also consistent with the standard requirements of the enterprise, and can eliminate the cumbersome steps of manually reapplying the style, greatly improving the maintenance efficiency of style uniformity, while avoiding errors and inconsistencies that may be caused by manual operations. By generating HTML content with a new style and dynamically assembling it, the target HTML document finally generated is more visually attractive, the user's reading experience will be significantly improved, and the style consistency and professionalism of the document will enhance the user's overall experience.

[0077] In summary, this method provides an efficient way to handle the style unification problem of text content and media elements without manual operation by users, reducing dependence on document editors and processing software, and also reducing the time wasted due to style clearing and reapplication. By applying existing machine learning and natural language processing technologies to the field of style beautification, this method can automatically recommend and apply matching visual styles, thereby promoting technological progress in this field and meeting personalized needs. In summary, this method can effectively solve the problem of inconsistent styles across platforms and applications, improve style uniformity, reduce manual operations, meet the style requirements of enterprises, and improve the reading experience of users.

[0078] In S1, refer to Figure 2 The flowchart of the data extraction method shown, "obtaining HTML content from a web page, performing data extraction on the HTML content, and obtaining plain text content and media elements" includes the following steps:

[0079] S11: Build DOM container;

[0080] S12: Load HTML content from a web page;

[0081] S13: Parse the HTML content through the DOM container to generate a DOM tree;

[0082] S14: extract HTML elements from the DOM tree and store the HTML elements into a collection;

[0083] S15: traverse the collection, extract the text content in the collection, and if there is a media element in the collection, extract the media element;

[0084] S16: preprocessing the text content, using a preset DOM element to wrap the preprocessed text content, and generating multiple plain text contents;

[0085] S17: multiple plain text contents constitute a content component, or multiple plain text contents and media elements together constitute a content component;

[0086] S18: Store the content components into a cache array in order in the HTML content.

[0087] In S11, a DOM (Document Object Model) container is created that is hidden from the user, such as a DOM container with a display:none style. Elements are used to parse and process HTML content in the background. DOM is an application programming interface (API) used to manipulate the content and structure of web documents. It defines a tree hierarchy in which nodes represent the various components of web documents, such as elements, attributes, and text.

[0088] In S12, the required HTML content is loaded from the web page, which may be content input by the user, a response obtained from the server, or an element content already on the page.

[0089] In S13, the loaded HTML content is injected into the DOM container, triggering the advanced parsing library to parse the HTML content and generate a DOM tree. The DOM tree is a tree structure that represents the structure of a web page document. It organizes the various parts of the HTML content (such as elements, attributes, and text, etc.) into a hierarchical structure, namely the DOM structure, so that the programming language can access and operate these contents in an orderly and structured manner. When the HTML content is injected into the DOM container, the first-level child elements of the container directly reflect the injected HTML structure, that is, the first level of the generated DOM tree is the HTML element.

[0090] In S14, after the DOM tree is created, the querySelectorAll method is used in conjunction with a CSS selector (eg, a * wildcard or a >child selector) to select all first-level HTML elements in the DOM tree, and these elements are stored in a preset collection, which may be a nodeList.

[0091] In S15, traverse the collection and use the innerText property to extract the text content of each HTML element. , <video> 、 <audio>Tags such as , etc., extract possible media elements. Media elements include at least one of the special elements such as pictures, videos, and audio. If the HTML element contains Tags, you can extract the image. If the HTML element contains <video>Tags, you can extract the video. If the HTML element contains <audio>Tag, then the audio can be extracted.

[0092] In S16, the extracted text content is preprocessed, and the preprocessing includes at least one of removing leading and trailing spaces, merging continuous line breaks, filtering sensitive words, and cleaning content. Among them, removing leading and trailing spaces refers to using the trim() method of the string to remove leading and trailing spaces of the text content; merging continuous line breaks refers to using a regular expression (recorded as the first regular expression here for easy distinction) to replace continuous line breaks in the text content with a single line break, and the line break is (\n). For example, the regular expression / \n\s*\n / g can be used to match multiple continuous line breaks and blanks, and replace them with a line break; filtering sensitive words refers to checking whether the text content contains sensitive words according to a preset sensitive word list. If sensitive words are found, a regular expression (recorded as the second regular expression here for easy distinction) is used to replace the sensitive words with preset characters (such as asterisks). *) or delete sensitive words; content cleaning refers to using the split() method to split the text content into a text array according to a single line break. The text array contains multiple array elements, each array element represents a line of text, traverses multiple array elements, and calls the array element being traversed the current array element. Delete the leading and trailing spaces of the current array element, and detect whether the current array element is empty after deleting the leading and trailing spaces. If it is empty, delete the current array element. If it is not empty, keep the current array element, and use a preset DOM element to wrap the current array element. The wrapped current array element is called plain text content. When multiple array elements are traversed, multiple plain text contents are obtained, among which the preset DOM element is or etc. tags.

[0093] Here are some examples to illustrate the above:

[0094] The text content is as follows:

[0095] This is sample paragraph 1.

[0096] This is example paragraph 2.

[0097] This is sample paragraph 3.

[0098] This text contains problems that need to be handled: leading and trailing spaces, consecutive line breaks, and possible sensitive words.

[0099] 1. Remove leading and trailing spaces:

[0100]

[0102] });

[0103] After performing the above preprocessing steps, cleanedTextArray will contain the following wrapped in The array elements in the tag get multiple plain text contents:

[0104] This is **** paragraph 1.

[0105] This is **** paragraph 2.

[0106] This is **** paragraph 3.

[0107] In S17, if there are no media elements in the set, the plurality of plain text contents constitute a content component; if there are media elements in the set, the plurality of plain text contents and the extracted media elements together constitute a content component.

[0108] In S18, the content components are stored in a preset cache array according to the order of the content components in the original HTML content to maintain the original display order.

[0109] The innerText property and querySelectorAll method mentioned above are implemented through the browser API. This method of directly obtaining HTML elements of the DOM tree using the browser API avoids manually writing complex DOM traversal and text extraction algorithms, and simplifies the development process. Compared with traditional algorithms such as depth-first search and breadth-first search, using the browser's own API to obtain HTML elements has almost no computational overhead, improves processing efficiency, reduces algorithm calculation errors introduced by manual DOM parsing and application of regular expressions, improves the stability and reliability of the code, and uses the browser's built-in method to make the code simpler and more intuitive, easy for new developers to understand, and also convenient for later maintenance. By displaying HTML content in a hidden DOM container and then obtaining plain text content, this method avoids directly operating the visible DOM and reduces the impact on the user interface. Since it does not involve complex DOM operations, this method reduces the security risks introduced by incorrect operations. This method does not rely on a specific library or framework, has good compatibility, and can be used in different browsers and environments.

[0110] Furthermore, the loaded HTML content is subjected to security verification, and the security verification includes at least one of data cleaning, tag filtering, attribute checking, attribute value checking, deep filtering, entity escape processing, encoding processing, and CSP verification. Among them, data cleaning refers to receiving the input HTML content, cleaning the HTML content, and removing irrelevant blank characters and comments to simplify the subsequent processing steps; tag filtering refers to traversing the tags in the HTML content after data cleaning, and deleting the tags that are not in the whitelist. The whitelist is a collection of pre-defined safe HTML tags; attribute checking refers to checking whether the attributes of the tags in the whitelist are in the attribute list when traversing the tags in the HTML content. If the attribute is not in the attribute list, the attribute is deleted or the value of the attribute is replaced with a preset safe value. The safe value can be a harmless placeholder. If the attribute is in the attribute list, the attribute value is checked; attribute value checking refers to URL encoding or HTML entity encoding of the attribute value. Encoding ensures that even if the attribute value contains special characters, it will not be misinterpreted by the browser to prevent potential cross-site scripting attacks (XSS attacks); deep filtering refers to the use of regular expressions (referred to as the third regular expression here for easy distinction) to filter malicious scripts on HTML content that passes attribute checks and attribute value checks to remove potential malicious code and unsafe elements; entity escape processing refers to HTML entity escape on HTML content that has passed deep filtering to ensure that the escaped special characters will no longer be misinterpreted by the browser to prevent XSS attacks; encoding processing refers to the use of a security framework to encode HTML content that has undergone entity escape processing to ensure that the encoded output content is safe when inserted into the DOM container. The security framework is OWASP Java Encoder for JavaScript; CSP verification refers to the implementation of Content Security Policy (CSP) on the server and client sides, and strict verification of the encoded HTML content and all accompanying resources loaded with the web page (such as JavaScript files, CSS style sheets, pictures, videos, audio, fonts, etc.) according to the content security policy. This process ensures that the loading and execution of all resources follow predetermined security standards, thereby reducing the risk of XSS and other code injection attacks.

[0111] Through the above security verification, the HTML content is security-checked and reinforced to ensure that all loaded HTML content has undergone security checks, prevent XSS attacks and other security threats, and ensure the security of HTML content.

[0112] In S2, refer to Figure 3 The flow chart of the style beautification method shown, "beautifying the style of content components based on style rules and generating HTML content with new styles" includes the following steps:

[0113] S21: Identify all content elements in the content component and classify the content elements;

[0114] S22: matching a corresponding style rule for the content element from a rule set according to the type of the content element;

[0115] S23: selecting a plurality of style classes from a preset style set according to the matched style rules;

[0116] S24: using a template engine to combine the content element with a number of style classes to generate a content element with a new style;

[0117] S25: Perform web typesetting processing on all content elements with the new style to generate HTML content with the new style.

[0118] In S21 and S22, a set of detailed style rules is defined according to the needs of users or enterprises to form a rule set. These rules include CSS properties such as color, font, size, margin, alignment, etc. set for different types of content elements. All content elements in the content component are identified, including plain text content and media elements such as pictures and videos. These content elements are classified so that appropriate style rules can be matched to the content elements according to their types.

[0119] In S23, a CSS preprocessor is used to create multiple reusable style classes (also called CSS classes) according to all style rules. These style classes constitute a style set. One style rule can create several style classes. From the style set, several style classes corresponding to the matched style rules are selected.

[0120] CSS preprocessors provide advanced features such as variables, nesting, and mixing, making CSS code more modular and easier to manage, converting style rules into specific style classes, which will be used in content elements to give them corresponding styles. Among them, CSS preprocessors can be selected from Sass or LESS.

[0121] In S24, a template engine is used to dynamically fill content elements for a preset HTML template, and a suitable style class is selected for the content element from a number of style classes according to the priority and conditional logic, and the selected suitable style class is also filled into the HTML template to generate a content element with a new style, which can also be called an HTML structure. Among them, the template engine can use Handlebars or EJS, etc. In CSS, the priority determines which style class will be applied when multiple style classes are applied to the same content element according to the type and characteristics of the content element. In the template engine, the priority is reflected through conditional logic, and the conditional statement is written using the syntax provided by the template engine to define the conditional logic.

[0122] In S25, the Web layout algorithm is applied to all content elements with the new style. The Web layout algorithm will perform further layout processing according to the personalized customization needs of users or enterprises, including but not limited to: bolding and blackening specific lines (such as the first line) to highlight important information; indenting the first line of paragraphs; automatically adjusting paragraph spacing according to text length and screen width through text flow control calculation to enhance readability; automatically adjusting font size and line height according to text content and screen resolution to enhance aesthetics; adjusting font color according to screen brightness to enhance reading comfort; automatically adding borders and arcs through text flow height calculation, and adjusting border styles according to the customization needs of users or enterprises to make the page more attractive; automatically detecting the best insertion position of the picture through picture position detection and analyzing text content, and adjusting the picture style, and automatically adjusting the picture style according to the picture size; automatically setting different personalized border styles for the picture through picture height detection. These personalized layout requirements can be processed and implemented at this stage. After the Web layout processing is completed, HTML content with a new style is generated.

[0123] Optionally, based on the configured identifier of the article to which the content element with the new style belongs, such as article type, author, publishing platform or other metadata, the specific needs of the article are identified, and the corresponding web typesetting algorithm is dynamically called to beautify it. For example, news articles, academic papers, blog posts, etc. require different typesetting rules.

[0124] In S3, refer to Figure 4 The flowchart of the dynamic rendering method shown, "dynamically assembling HTML content with a new style, generating a target HTML document, and displaying the target HTML document on a web page" includes the following steps:

[0125] S31: using a preset data structure to store HTML content with a new style;

[0126] S32: Create a DocumentFragment object, add the content elements in the data structure to the DocumentFragment object, and generate a target HTML document;

[0127] S33: using an adaptive layout algorithm to adjust the layout of the target HTML document;

[0128] S34: Displaying the target HTML document after the layout adjustment on the web page.

[0129] In S31, in order to improve processing speed and reduce memory usage, efficient data structures such as hash tables or linked lists are used to store HTML content with new styles, ensuring that content can be quickly accessed and updated when processing large amounts of data while reducing memory usage. For example, a hash table is used to store HTML content with new styles, using the key-value pair feature of the hash table, with the element index as the key and the HTML content with new styles as the value. This data structure design makes the time complexity of search and update operations close to O(1), greatly improving processing speed.

[0130] In S32, content elements are retrieved from the data structure in S31, and these content elements are gradually added to the created DocumentFragment object. Web Workers or Service Workers technology is used to asynchronously process DOM operations and resource loading in the background thread to avoid blocking the main thread. Combined with JavaScript's automatic garbage collection mechanism, unused memory space is released in time to avoid memory leaks. The DocumentFragment object is a lightweight DOM structure used to build and organize DOM elements offline without directly affecting page rendering. The DocumentFragment object can gradually reassemble content elements to form a new DOM structure, that is, the target HTML document. This operation ensures that the target HTML document meets semantic standards and can perform seamless user interaction, while avoiding the performance loss of page redrawing and reflowing.

[0131] In S33, CSS Grid and Flexbox are combined with JavaScript to implement an adaptive layout algorithm to adjust the layout of the target HTML document. Specifically, CSS Grid is used to define the grid layout of the main container, and Flexbox is used to define the flexible layout of sub-elements. JavaScript is used to monitor window size change events, obtain the screen size in real time, and dynamically update layout properties according to the screen size, such as the number of grid columns, the order of sub-elements, etc. In this way, the layout of text and media elements can be automatically adjusted according to the device screen size, and different layout rules can be defined for different screen sizes using CSS media queries to ensure good visual effects on different devices.

[0132] In S33, a DOM container for display is pre-set in the web page, that is, a DOM element is reserved in the web page as a display area for new content. The container is referred to as a display container. The target HTML document after the layout adjustment is added to the display container to complete the display of the target HTML document after the layout adjustment in the web page, and ensure that the layout of the content is coordinated with other parts of the web page.

[0133] Based on the above-mentioned method of automatically beautifying web page content, the efficiency and quality of web page content editing and display can be significantly improved through automation technology. Specifically, it realizes the intelligent extraction of HTML content in web pages, accurately captures plain text content and media elements, and lays a solid foundation for subsequent style beautification. Using the constructed rule set, the content components can be personalized and beautified according to the preset multiple style rules, and HTML content with new styles that meet the needs of users or enterprises can be generated. In addition, the dynamic assembly process ensures the structural and semantic accuracy of the newly created HTML document, while maintaining the consistency of the display order with the original content. Through the adaptive layout algorithm, the display effect of the content on different devices and screen sizes is further optimized, realizing a truly responsive design. Finally, through asynchronous loading technology, the loading speed and responsiveness of the page are accelerated without sacrificing the user experience.

[0134] In summary, the implementation of this method has brought improvements to content creation and consumption. It not only simplifies the traditional cumbersome manual style editing process, but also ensures the consistency and accuracy of the style through automation, thereby reducing labor costs and time costs. Cross-platform compatibility ensures the seamless display of content on different devices and browsers. This method provides a high degree of personalized customization capabilities, which can automatically generate document styles that meet specific scenarios based on user needs or contextual environments. This personalized customization capability meets the unique needs of different users and enterprises. In addition, by improving operational efficiency and user experience, the attractiveness and readability of content are enhanced, making information dissemination more efficient. The automated and intelligent processing flow, combined with the application of modern Web technologies, brings convenience and rich experience to users in the mobile Internet era.

[0135] Reference Figure 5 The present disclosure provides a system for automatically beautifying webpage content, comprising:

[0136] The data extraction module 101 is used to obtain HTML content from a web page, extract data from the HTML content, and obtain content components, where the content components include at least one of plain text content and media elements;

[0137] The style beautification module 102 is used to construct a rule set including multiple style rules, beautify the style of the content component based on the rule set, and generate HTML content with a new style;

[0138] The dynamic assembly module 103 is used to dynamically assemble the HTML content with the new style, generate a target HTML document, and display the target HTML document in a web page.

[0139] The various variations and specific examples of the method for automatically beautifying web page content provided above are also applicable to the system for automatically beautifying web page content provided in the present disclosure. Through the above detailed description of the method for automatically beautifying web page content, those skilled in the art can clearly know the implementation method of the system for automatically beautifying web page content. For the sake of brevity of the specification, it will not be described in detail here.

[0140] The computer device according to the embodiment of the present disclosure includes a memory and a processor. The memory is used to store non-temporary computer-readable instructions. Specifically, the memory may include one or more computer program products, and the computer program product may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. The volatile memory may, for example, include a random access memory (RAM) and / or a cache memory (cache), etc. The non-volatile memory may, for example, include a read-only memory (ROM), a hard disk, a flash memory, etc.

[0141] The processor may be a central processing unit (CPU) or other forms of processing units with data processing capabilities and / or instruction execution capabilities, and may control other components in the computer device to perform desired functions. In one embodiment of the present disclosure, the processor is used to run the computer-readable instructions stored in the memory, so that the computer device performs all or part of the steps of the method for automatically beautifying webpage content in the aforementioned embodiments of the present disclosure.

[0142] Those skilled in the art should be able to understand that in order to solve the technical problem of how to obtain a good user experience, the present embodiment may also include well-known structures such as a communication bus and an interface, and these well-known structures should also be included in the protection scope of the present disclosure.

[0143] like Figure 6 A schematic diagram of the structure of a computer device provided in an embodiment of the present disclosure is shown, which is a schematic diagram of the structure of a computer device suitable for implementing the embodiment of the present disclosure. Figure 6 The computer device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0144] like Figure 6 As shown, the computer device may include a processor (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) or a program loaded from a storage device into a random access memory (RAM). In the RAM, various programs and data required for the operation of the computer device are also stored. The processor, ROM, and RAM are connected to each other via a bus. An input / output (I / O) interface is also connected to the bus.

[0145] Typically, the following devices can be connected to the I / O interface: input devices such as sensors or visual information acquisition devices; output devices such as display screens; storage devices such as tapes, hard disks, etc.; and communication devices. The communication device can allow the computer device to communicate with other devices (such as edge computing devices) wirelessly or by wire to exchange data. Figure 6 A computer device having various devices is shown, but it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed instead.

[0146] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device, or installed from a ROM. When the computer program is executed by a processor, all or part of the steps of the method for automatically beautifying web page content of an embodiment of the present disclosure are executed.

[0147] For detailed description of this embodiment, reference may be made to the corresponding descriptions in the aforementioned embodiments, which will not be repeated here.

[0148] According to the computer-readable storage medium of the embodiment of the present disclosure, non-transitory computer-readable instructions are stored thereon. When the non-transitory computer-readable instructions are executed by a processor, all or part of the steps of the method for automatically beautifying webpage content of the above-mentioned embodiments of the present disclosure are executed.

[0149] The above-mentioned computer-readable storage media include, but are not limited to: optical storage media (e.g., CD-ROM and DVD), magneto-optical storage media (e.g., MO), magnetic storage media (e.g., magnetic tape or mobile hard disk), media with built-in rewritable non-volatile memory (e.g., memory card) and media with built-in ROM (e.g., ROM box).

[0150] For detailed description of this embodiment, reference may be made to the corresponding descriptions in the aforementioned embodiments, which will not be repeated here.

[0151] The basic principles of the present disclosure are described above in conjunction with specific embodiments. However, it should be noted that the advantages, strengths, effects, etc. mentioned in the present disclosure are only examples and not limitations, and it cannot be considered that these advantages, strengths, effects, etc. are required by each embodiment of the present disclosure. In addition, the specific details disclosed above are only for the purpose of illustration and ease of understanding, and are not limitations. The above details do not limit the present disclosure to the necessity of adopting the above specific details to be implemented.

[0152] In the present disclosure, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. The block diagrams of the devices, devices, equipment, and systems involved in the present disclosure are only illustrative examples and are not intended to require or imply that they must be connected, arranged, and configured in the manner shown in the block diagram. As will be recognized by those skilled in the art, these devices, devices, equipment, and systems can be connected, arranged, and configured in any manner. Words such as "including", "comprising", "having", etc. are open words, meaning "including but not limited to", and can be used interchangeably with them. The words "or" and "and" used here refer to the words "and / or" and can be used interchangeably with them, unless the context clearly indicates otherwise. The word "such as" used here refers to the phrase "such as but not limited to", and can be used interchangeably with it.

[0153] Additionally, as used herein, "or" used in a list of items beginning with "at least one" indicates a disjunctive list, so that, for example, a list of "at least one of A, B, or C" means A or B or C, or AB or AC or BC, or ABC (i.e., A and B and C). Furthermore, the word "exemplary" does not mean that the example described is preferred or better than other examples.

[0154] It should also be noted that in the system and method of the present disclosure, each component or each step can be decomposed and / or recombined. Such decomposition and / or recombination should be regarded as equivalent solutions of the present disclosure.

[0155] Various changes, substitutions, and modifications of the techniques described herein may be made without departing from the teachings defined by the appended claims. Furthermore, the scope of the claims of the present disclosure is not limited to the specific aspects of the processes, machines, manufactures, compositions of events, means, methods, and actions described above. Currently existing or later to be developed processes, machines, manufactures, compositions of events, means, methods, or actions that perform substantially the same functions or achieve substantially the same results as the corresponding aspects described herein may be utilized. Thus, the appended claims include such processes, machines, manufactures, compositions of events, means, methods, or actions within their scope.

[0157] The above description of the disclosed aspects is provided to enable any person skilled in the art to make or use the present disclosure. Various modifications to these aspects will be readily apparent to those skilled in the art, and the general principles defined herein may be applied to other aspects without departing from the scope of the present disclosure. Therefore, the present disclosure is not intended to be limited to the aspects shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

[0158] The above description has been given for the purpose of illustration and description. In addition, this description is not intended to limit the embodiments of the present disclosure to the forms disclosed herein. Although multiple example aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, changes, additions and sub-combinations thereof. < / audio> < / video> < / audio> < / video>

Claims

1. A method for automatically beautifying webpage content, characterized in that: include: Obtaining HTML content from a web page, performing data extraction on the HTML content, and obtaining a content component, wherein the content component includes at least one of plain text content and a media element; Building a rule set including multiple style rules, and performing style beautification on the content component based on the rule set to generate HTML content with a new style; The HTML content with the new style is dynamically assembled to generate a target HTML document, and the target HTML document is displayed on a web page.

2. The method for automatically beautifying webpage content according to claim 1, characterized in that: The step of obtaining HTML content from a web page and extracting data from the HTML content to obtain content components includes: Build a DOM container; Loading the HTML content from a web page; Parsing the HTML content through the DOM container to generate a DOM tree; Extracting HTML elements from the DOM tree, and storing the HTML elements into a collection; Traverse the collection, extract the text content in the collection, and if there is a media element in the collection, extract the media element; Preprocessing the text content, and wrapping the preprocessed text content with a preset DOM element to generate the plurality of plain text contents; The plurality of plain text contents constitute the content component, or the plurality of plain text contents and the media element together constitute the content component; The content components are stored in a cache array in the order in which they appear in the HTML content.

3. The method for automatically beautifying webpage content according to claim 2, characterized in that: The preprocessing includes at least one of removing leading and trailing spaces, merging consecutive line breaks, filtering sensitive words, and cleaning content.

4. The method for automatically beautifying webpage content according to claim 2, characterized in that: The preprocessing includes removing leading and trailing spaces, merging consecutive line breaks, filtering sensitive words, and cleaning content; Wherein, removing leading and trailing spaces refers to removing leading and trailing spaces of the text content; Merging consecutive line breaks refers to replacing consecutive line breaks in the text content with a single line break; The sensitive word filtering refers to checking whether the text content contains sensitive words according to a preset sensitive word list. If sensitive words are found, the sensitive words are replaced with preset characters or deleted. The content cleaning refers to splitting the text content into a text array according to a single line break, the text array contains multiple array elements, traversing the multiple array elements, deleting the leading and trailing spaces of the current array element, and detecting whether the current array element is empty after deleting the leading and trailing spaces; If it is empty, delete the current array element; If it is not empty, the current array element is retained, and the current array element is wrapped with a preset DOM element. The wrapped current array element is called plain text content. When multiple array elements are traversed, multiple plain text contents are obtained.

5. The method for automatically beautifying webpage content according to claim 1, characterized in that: Also includes: Perform security verification on the loaded HTML content, wherein the security verification includes at least one of data clearing, tag filtering, attribute checking, attribute value checking, deep filtering, entity escape processing, encoding processing, and CSP verification; The data cleaning refers to receiving the input HTML content, cleaning the HTML content, and removing irrelevant blank characters and comments; The tag filtering refers to traversing the tags in the HTML content after data cleaning and deleting the tags that are not in the whitelist; The attribute check refers to checking whether the attribute of the tag in the whitelist is in the attribute list when traversing the tags in the HTML content. If the attribute is not in the attribute list, the attribute is deleted or the value of the attribute is replaced with a preset security value. If the attribute is in the attribute list, the attribute value is checked. The attribute value check refers to URL encoding or HTML entity encoding of the attribute value; The deep filtering refers to filtering malicious scripts from HTML content that passes attribute inspection and attribute value inspection; The entity escape processing refers to performing HTML entity escape on the HTML content that has been deeply filtered; The encoding process refers to encoding the HTML content after entity escape processing by using a security framework; The CSP verification refers to implementing the content security policy on the server and the client, and verifying the encoded HTML content and all accompanying resources loaded with the web page according to the content security policy.

6. The method for automatically beautifying webpage content according to claim 1, characterized in that: The beautifying the style of the content component based on the rule set to generate HTML content with a new style includes: Identify all content elements in the content component and classify the content elements; According to the type of the content element, the corresponding style YY+242209P is matched for the content element from the rule set. rule; According to the matched style rules, several style classes are selected from the preset style set; Using a template engine to combine the content element with the plurality of style classes to generate a content element with a new style; Web typesetting is performed on all content elements with the new style to generate HTML content with the new style.

7. The method for automatically beautifying webpage content according to claim 6, characterized in that: The step of dynamically assembling the HTML content with the new style to generate a target HTML document and displaying the target HTML document on a web page includes: Using a preset data structure to store the HTML content with the new style; Create a DocumentFragment object, add the content elements in the data structure to the DocumentFragment object, and generate a target HTML document; Adopting an adaptive layout algorithm to adjust the layout of the target HTML document; Display the target HTML document after layout adjustment on the web page.

8. A computer device, characterized in that: The computer device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the method for automatically beautifying web page content according to any one of claims 1-7.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a computer to execute the method for automatically beautifying webpage content as described in any one of claims 1-7.

10. A computer program product comprising computer instructions, characterized in that: When the computer instructions are executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images