HTML5 page processing method and device, equipment and storage medium

Abstract

The invention provides an HTML5 page processing method and device, equipment and a storage medium, and the method comprises the steps: determining an original page language of an HTML5 page, and triggering automatic translation of an original page text of the HTML page and accurate target language translation text replacement when it is detected that the original page language is inconsistent with a system language and meets a preset triggering condition, so that the HTML5 page is automatically translated. According to the method, efficient translation of HTML5 page content is achieved, user operation is reduced, the experience of a user in cross-language interaction is improved, and the user operation experience feeling is improved.

Description

Background Art

[0002] With the continuous progress of Internet technology, HTML5 pages have become the core technical carriers of mobile applications, web services, and enterprise management systems due to their cross-platform characteristics, dynamic loading capabilities, and rich interactive functions. Especially on mobile devices, HTML5 pages are usually embedded in applications through WebView components to quickly display content and implement user interactions.

[0003] However, in the context of globalization, the phenomenon of the system language of the user device being inconsistent with the language of the HTML5 page is becoming increasingly common. For example, when the language of the HTML5 page accessed by the user is inconsistent with the system language of their device, the user may have difficulty understanding the page content. Especially in key scenarios such as payment and settlement, this language barrier may lead to operational errors or abandonment of use. Therefore, the current user experience of applications based on HTML5 pages is poor.

[0004] It should be noted that the information disclosed in the above background art section is only used to enhance the understanding of the background of the present invention. Therefore, it may include information that does not constitute the prior art known to those of ordinary skill in the art. Summary of the Invention

[0005] Aiming at the problems in the prior art, the purpose of the present invention is to provide an HTML5 page processing method, device, equipment, and storage medium, which overcome the difficulties of the prior art and can solve the technical problem of the poor user experience of current applications based on HTML5 pages.

[0006] The first aspect of the present disclosure provides an HTML5 page processing method, which includes:

[0007] Extract the text nodes in the HTML5 page, and based on the content analysis of the text nodes, determine the original page language of the HTML5 page;

[0008] When it is detected that the original page language is inconsistent with the system language of the user device and meets the preset trigger conditions, determine the target language according to the system language, and obtain the target language translation text of the original page text of the HTML5 page according to the preset translation strategy;

[0009] Replace the original page text of the HTML5 page with the target language translation text and maintain the original page structure.

[0010] In some embodiments, the preset trigger conditions include at least one of the following:

[0011] After the HTML5 page is loaded, it is detected that the original page language of the HTML5 page does not match the system language of the user device;

[0012] When entering the payment page or settlement page, it is detected that the URL corresponding to the HTML5 page contains a preset payment website domain name;

[0013] The user's stay time on the HTML5 page exceeds the set threshold;

[0014] The user triggers the translation button.

[0015] In some embodiments, the translation button is a floating button in the WebView interface or an interactive component in the HTML5 page.

[0016] In some embodiments, when entering the payment page or settlement page, obtaining the target language translation text of the original page text of the HTML5 page according to the preset translation strategy includes:

[0017] Identify HTML elements in the HTML5 page that contain payment form input fields or payment description text, and obtain the target language translation text of the HTML elements of the payment information while keeping the payment form input fields unchanged.

[0018] In some embodiments, obtaining the target language translation text of the original page text of the HTML5 page according to the preset translation strategy includes:

[0019] Based on the preset translation strategy, generate a translation request based on the original page text and the target language, and send it to the translation server. The translation server receives the translation request and returns the target language translation text.

[0020] In some embodiments, generating a translation request based on the original page text and the target language includes:

[0021] Encapsulate the original page text and the target language into a translation request in JSON format.

[0022] In some embodiments, the translation server uses the following strategy to translate the original page text:

[0023] Query the cache based on the hash value of the original page text;

[0024] If the cache is hit, directly return the hit target language translation text;

[0025] If the cache is not hit, call the translation API to translate the original page text to obtain the target language translation text, and store the target language translation text in the cache.

[0026] In some embodiments, when the HTML5 page is a static page, replacing the original page text of the HTML5 page with the target language translation text includes:

[0027] Traverse the DOM tree of the HTML5 page, replace the original page text with the target language translation text, and keep the original page structure unchanged.

[0028] In some embodiments, when the HTML5 page is a dynamically loaded page, the replacement of the original page text of the HTML5 page with the target language translation text includes:

[0029] Traverse the DOM tree of the HTML5 page, replace the original page text with the target language translation text, then monitor the content changes in the HTML5 page. When a new text node is detected, use the new text node as the text node, and return the content analysis based on the text node to determine the original page language of the HTML5 page.

[0030] In some embodiments, the determination of the original page language of the HTML5 page based on the content analysis of the text node includes:

[0031] Analyze the content of the text nodes in the HTML5 page based on a language model, calculate the language distribution probability of each text node, and determine the original page language of the HTML5 page based on the language with the highest probability.

[0032] The second aspect of the present disclosure provides an HML5 page processing device, which includes:

[0033] An extraction module that extracts the text nodes in the HTML5 page and determines the original page language of the HTML5 page based on the content analysis of the text nodes;

[0034] A translation module that, when it detects that the original page language is inconsistent with the system language of the user device and meets a preset trigger condition, determines the target language according to the system language, and obtains the target language translation text of the original page text of the HTML5 page according to a preset translation strategy;

[0035] A replacement module that replaces the original page text of the HTML5 page with the target language translation text and keeps the original page structure.

[0036] The third aspect of the present disclosure provides an electronic device, which includes:

[0037] A processor;

[0038] A memory in which executable instructions of the processor are stored;

[0039] Wherein, the processor is configured to execute the steps of the HTML5 page processing method described in any of the above embodiments by executing the executable instructions.

[0040] The fourth aspect of the present disclosure provides a computer-readable storage medium for storing a program, which when executed implements the steps of the HTML5 page processing method described in any of the embodiments.

[0041] The HTML5 page processing method, apparatus, device and storage medium provided by the embodiments of the present disclosure have the following advantages:

[0042] By performing intelligent language recognition on the content of text nodes, and when it is detected that the language of the original page is inconsistent with the system language of the user device, triggering automatic translation of the original page text of the HTML page and accurate replacement of the translated text in the target language, the efficient translation of the HTML5 page content is realized, reducing user operations, thereby enhancing the user experience in cross-language interaction and improving the user operation experience.

[0043] It should be understood that the above general description and the following detailed description are only exemplary and explanatory, and cannot limit the present disclosure. Description of the Drawings

[0044] By reading the detailed description of the non-limiting embodiments with reference to the following drawings, other features, objectives and advantages of the present invention will become more apparent.

[0045] Figure 1 Showing a flowchart of an HTML5 page processing method provided by an embodiment of the present disclosure;

[0046] Figure 2 Showing a flowchart of an HTML5 page processing method in a payment scenario;

[0047] Figure 3 Showing a timing diagram of an HTML5 page processing method in a payment scenario;

[0048] Figure 4 Showing a schematic diagram of the module structure of an HTML5 page processing system provided by an embodiment of the present disclosure;

[0049] Figure 5 Showing a schematic diagram of the structure of an electronic device provided by an embodiment of the present disclosure;

[0050] Figure 6 It is a schematic diagram of the structure of a computer program product according to an embodiment of the present disclosure. Detailed Embodiments

[0051] Example embodiments will now be described more fully with reference to the accompanying drawings. However, the example embodiments can be implemented in various forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of the example embodiments to those skilled in the art. The features, structures, or characteristics described may be combined in any suitable manner in one or more embodiments.

[0052] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus repeated descriptions thereof will be omitted. Some of the block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities may be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0053] In the prior art, some browsers or plugins provide web page translation functions. Although language conversion can be achieved to a certain extent, there are still significant limitations. First, the translation trigger mechanism of these tools is relatively single, usually relying on manual operation by the user and being difficult to trigger intelligently according to specific scenarios. Second, translation requires the user to refresh the page, and page refresh may cause interruption of interaction and affect the user experience.

[0054] Therefore, there is an urgent need for a new HTML5 page processing method that can trigger translation intelligently, thereby improving the efficiency of cross - language interaction and user satisfaction, and enhancing the user operation experience.

[0055] Specifically, as Figure 1 shown, the embodiments of the present disclosure provide an HTML5 page processing method, and the execution subject of this HTML5 page processing method is an HTML5 page processing system. The HTML5 page processing method of this embodiment includes but is not limited to the following steps:

[0056] Step 110: Extract text nodes in the HTML5 page, and determine the original page language of the HTML5 page based on the analysis of the content of the text nodes;

[0057] Step 120: When it is detected that the original page language is inconsistent with the system language of the user device and a preset trigger condition is met, determine the target language according to the system language, and obtain the target - language translation text of the original page text of the HTML5 page according to a preset translation strategy;

[0058] Step 130: Replace the original page text of the HTML5 page with the target - language translation text and maintain the original page structure.

[0059] In the disclosed embodiments, a text node is a basic unit for storing text content of an HTML page. By performing intelligent language recognition on the content of a text node and detecting that the original page language is inconsistent with the system language of a user device, automatic translation of the original page text of the HTML page and accurate replacement of the target language translation text are triggered, thereby achieving efficient translation of HTML5 page content and reducing user operations, thereby improving the user experience in cross-language interaction and the user's operational experience.

[0060] In the disclosed embodiment, when the original page text of an HTML page is automatically translated, the original page structure and style of the HTML page are kept unchanged to ensure the integrity of the page structure and style.

[0061] In the embodiment of the present disclosure, when executing step 110, the original page language of the current HTML page is identified to provide a basis for subsequent translation.

[0062] In the optional method, after the HTML5 page is loaded, the DOM tree is first recursively traversed through JavaScript to extract all text nodes and exclude non-text areas. This process ensures the comprehensiveness of the analysis object. Subsequently, the extracted text nodes are analyzed using language models such as natural language processing (NLP) algorithms to calculate the language distribution probability of each text node.

[0063] For example, for the text "This is a test", the NLP model may output {'en': 0.98, 'fr': 0.01, 'es': 0.01}; for "This product is great", it may output {'zh': 0.95, 'en': 0.03, 'ja': 0.02}. Based on the probability distribution of all text nodes, the language weight of the entire HTML page is calculated, and the language with the highest probability is finally selected as the original page language of the HTML5 page.

[0064] Alternatively, a simple language detection method based on character statistics (such as counting the frequency of common character combinations) is used to determine the original page language, which is suitable for resource-constrained environments. For example, directly reading the lang attribute of an HTML tag (such as ), but this method relies on the page developer to set it correctly and may not be able to handle multi-language mixed content.

[0065] To improve the recognition accuracy of the original page language, the embodiments of the present disclosure also introduce an optimization strategy based on a context window. In a multi-language mixed page, the HTML5 page is divided into different regions (such as titles, descriptions, comments), and the local language weights are calculated separately. For example, a product detail page may contain an English title, a Chinese description, and a French comment. The size of the context window is dynamically adjusted according to the DOM structure of the HTML5 page: a small window is suitable for short texts, a medium window is suitable for paragraphs, and a large window is suitable for long articles. This partition analysis ensures the local accuracy of language recognition and avoids the limitations of the global single-language assumption.

[0066] In the embodiments of the present disclosure, once the original page language is determined, step 120 is executed to further detect whether it is consistent with the system language of the user device (obtained through navigator.Language for example). If not, the translation process will be started when a preset trigger condition is met.

[0067] In an alternative manner, the above preset trigger conditions include at least one of the following:

[0068] After the HTML5 page is loaded, it is detected that the original page language of the HTML5 page does not match the system language of the user device;

[0069] When entering the payment page or the settlement page, it is detected that the URL corresponding to the HTML5 page contains a preset payment website domain name;

[0070] The residence time of the HTML5 page exceeds a set threshold;

[0071] The user triggers the translation button.

[0072] Among them, for the HTML5 page to be loaded completely: after the DOMContentLoaded event is triggered, it is detected that the original page language of the HTML5 page does not match the system language of the user device, which is applicable to most pages.

[0073] In a payment scenario, when the uniform resource locator (URL) of the payment page or the settlement page matches a preset payment domain name (such as the regular expression / (pay|checkout)\..* / ) or the HTML5 page contains payment form elements (such as <input name="card_number">), it is automatically triggered, which is especially applicable to the international payment scenario.

[0074] Among them, the implementation method for the residence time of the HTML5 page to exceed the set threshold is to monitor the user residence time of the HTML5 page through a timer, and a translation prompt is popped up after the set threshold is exceeded, which is suitable for news or e-commerce pages.

[0075] As an implementation method for the user to trigger the translation button, the translation button is a floating button in the WebView interface or an interactive component in the HTML5 page. When the user clicks the floating button in the WebView interface or the interactive component within the HTML5 page, translation is triggered, which is applicable to social media or personalized needs.

[0076] After the preset trigger condition is satisfied, the system determines the target language based on the system language of the user device and generates a translation request. Specifically, the translation request encapsulates the original page text and the target language in JSON format. Subsequently, the translation request is sent to the translation server via the Hypertext Transfer Protocol (HTTP).

[0077] In one implementation, 1. The translation server uses the following strategy to translate the original page text:

[0078] Query the cache (such as Redis) based on the hash value (such as SHA-256) of the original page text;

[0079] If the cache hits, directly return the hit target language translation text;

[0080] If the cache misses, call the translation API to translate the original page text to obtain the target language translation text, and store the target language translation text in the cache.

[0081] This caching mechanism significantly reduces translation latency and improves system efficiency. In the case of a miss, the current target language translation text is stored in the cache for future use.

[0082] In addition, this implementation uses the cooperation between the local client and the translation server to complete the current HTML page processing solution, reducing the computational load on the local client. In another implementation, the original page language recognition, translation, and replacement of the HTML5 page can also be completed on the local client.

[0083] In the implementation of the present disclosure, when the user device obtains the target language translation text, the system enters the text replacement stage, the goal of which is to replace the original page text with the target language translation text while maintaining the integrity of the page structure and style.

[0084] Specifically, according to the different page types, the replacement strategy can be divided into two cases: static and dynamic.

[0085] For example, when the HTML5 page is a static page, the system traverses the DOM tree of the HTML5 page, replaces the original page text with the translated text in the target language, and keeps the original page structure unchanged. During the traversal, the content of each text node is replaced with the corresponding translated text in the target language, while the structure of the parent element of the text node and the CSS style remain unchanged. For example, a The "This is a test" in the tag is replaced with "This is a test", but its font, color and other style attributes are not affected. This process is simple and efficient and is suitable for pages with fixed content.

[0086] However, when the HTML5 page is a dynamically loaded page (such as a single-page application SPA), a one-time replacement is not enough to cope with the new content. Therefore, the disclosed embodiment introduces a MutationObserver mechanism to continuously monitor DOM changes after the initial replacement is completed.

[0087] First, traverse the HTML5 page DOM tree and replace the original page text with the target language translation text. Then monitor the content changes in the HTML5 page. When a new text node is detected, automatically extract its content. The system uses the new text node as the text node and executes the above steps 120-140 until the replacement and redisplay are completed. For example, in a news page, when the user scrolls to load new comments, the system translates these comments in real time to ensure content consistency.

[0088] To optimize performance, the monitoring scope can be limited to a specific area (such as .comments), and hash values ​​can be used to avoid duplicate translations. In addition, short texts (such as buttons) are given higher priority to improve user experience.

[0089] In special scenarios such as payment pages, the replacement strategy is further refined. The system detects HTML elements such as payment elements and payment-related keywords to distinguish between payment instructions and payment form input fields. At this time, only the payment instructions are translated, and the payment form input fields remain unchanged. For example, "Please confirm your payment" is translated as "Please confirm your payment", while the amount "$100" or the payment form input field <input name＝"card_number"> This differentiation ensures the security and integrity of the payment process.

[0090] In the disclosed embodiments, in many HTML5 pages, the text content of the original page text is not in a single language, but in a multi-language mixed state. For example, a cross-border e-commerce page may contain an English title, a Chinese description, and a French comment. If the entire page is directly translated globally, the title may be redundantly translated or the description language may be selected incorrectly. For this reason, the disclosed embodiments introduce a regionalized translation strategy based on a context window.

[0091] The context window refers to the local text range surrounding a text node or content area, and its size is dynamically adjusted according to the DOM structure.

[0092] Exemplarily, first divide the HTML page into multiple context windows, such as the title (small window), description (medium window), and comments (medium window). Subsequently, run the language model on the text content within each context window to calculate the language probability distribution. For example, one Contains "Great product! This product is great", which can be divided into two context windows: "Greatproduct!" is recognized as English, and "This product is great" is recognized as Chinese. Based on this, the system performs translation according to the corresponding region of the context window: if the regional language is the same as the target language, it is skipped; if they are different, it is translated. For example, when the target language is English, the Chinese description is translated into "This product is great", while the English title remains unchanged.

[0093] This partitioned translation strategy not only improves translation accuracy, but also avoids unnecessary translation overhead, and is particularly suitable for complex pages with mixed languages.

[0094] The technical solution of the disclosed embodiment performs well in a variety of application scenarios, which are illustrated below through specific cases.

[0095] 1. Cross-border e-commerce scenarios.

[0096] For example, a user browses a product details page, the title is in English, the description is in Chinese, and the current system language is Chinese. At this time, the HTML5 page processing flow is:

[0097] Extract text nodes and identify that the title is in English and the description is in Chinese;

[0098] A mismatch with the target language (e.g. Spanish) is detected, triggering translation;

[0099] Only translate the title into Chinese and keep the description;

[0100] Replace title text in HTML pages with translated text, keeping page style.

[0101] This can improve the readability of product information and increase order rates.

[0102] 2. International payment scenarios.

[0103] This embodiment provides the following payment page processing flow based on HTML pages.

[0104] For example, a complete payment process based on scan payment is:

[0105] On the client side, the user launches the app and scans the QR code;

[0106] The APP scans and identifies the merchant code;

[0107] Determine whether it is URL mode or non-URL mode based on the merchant code;

[0108] In APP Gateway (client gateway):

[0109] For non-URL mode, the APP Gateway parses the payload;

[0110] If the payload parsing result is 00-01-02, the process ends.

[0111] If the payload parsing result is 52*-6011, continue the processing.

[0112] Otherwise, check if it is a payment standard code;

[0113] If it is a payment standard code, directly obtain merchant information and transaction information;

[0114] If it is not a payment standard code, send QRC_INFO_INQUIRY to query merchant information to the client.

[0115] On the client side:

[0116] The user inputs / confirms transaction information on the confirmation interface and sends it to the payment gateway.

[0117] Receive a payment request from the payment gateway, the user confirms and verifies the transaction at the cashier, and returns the verification result to the payment gateway.

[0118] On the client gateway side:

[0119] Perform cache check verification based on the verification result;

[0120] If the verification result is failed, return an error message.

[0121] If the verification result is successful, call different interfaces (such as MPROC PAYMENT, etc.) according to the type of the code, send a payment request to the payment gateway (UPL), and the payment gateway sends the payment request to the issuing institution for authorization processing;

[0122] When receiving the authorization response information from the issuing institution from the payment gateway, send the transaction result to the client side, and the user views the transaction result.

[0123] In the transaction stage, if the transaction times out, the client gateway sends a TRX RESULT INQUIRY request to the payment gateway; the payment gateway returns a TRX RESULT INQUIRY response to the client gateway, and the client gateway sends the transaction result to the client side, and the user views the transaction result.

[0124] In this process, there are many steps that need to display the payment page to the user. At this time, it involves the payment page processing flow based on code scanning payment, such as Figure 2 As shown, the processing flow includes the following steps:

[0125] Step 210: The user scans the payment code.

[0126] Step 220: Identify the scanned information and embed an HTML5 page in the WebView interface for the user to view and interact with.

[0127] Step 230: The user can long-press on the text on the HTML5 page to select the partial translation function.

[0128] Step 240: If the user chooses to use the default translation tool of the WebView, the system will call this tool for translation.

[0129] Step 250: Display the translated HTML5 page in the WebView.

[0130] After executing step 220, step 260 is also executed: Use natural language processing (NLP) technology and / or a third-party language detection library to identify the original page language on the HTML page and determine whether it is the same as the system language of the current user device.

[0131] Step 270: If they are the same, directly display the HTML5 page.

[0132] Step 280: If they are not the same, display the translation tool button and inject translation-related JS scripts into the HTML5 page.

[0133] Step 290: Run the JS script, extract the text content of the HTML5 page through the injected JS script, filter out invalid text nodes, call the interface for translation based on the target language, replace the corresponding original page text in the HTML5 page with the target language translation text, and then execute step 250.

[0134] Generally speaking, when the user enters the payment page, the system detects that the URL contains the payment domain name (such as "pay.example.com"); extracts the page text nodes and identifies the HTML element containing the payment form (such as <form>(Description text within); Only translate the payment information description text, keeping the input fields (such as amount, card number) unchanged; Replace the translated text back to the page to keep the payment form function intact. This process ensures the security of the payment process and allows users to complete the payment smoothly.

[0135] Such as Figure 3 As shown, the embodiments of the present disclosure also provide a timing diagram of a method for processing an HTML5 page in a payment scenario, and the process description is as follows:

[0136] Step 310: The user (Actor) uses the user device to scan the collection code.

[0137] Step 320: The WebView receives the scanning result and loads the HTML5 page.

[0138] Step 330: The WebView injects a JS script into the HTML5 page.

[0139] Step 340: The WebView determines whether the original page language of the HTML5 page is the same as the system language of the user device. If not, a translation button is displayed for the user to operate.

[0140] Step 350: The WebView loads the corresponding HTML5 page, which is a payment receipt page, and displays the payment receipt page to the user for viewing and interaction.

[0141] Step 360: The user views the page in the WebView and clicks the translation button when needed.

[0142] Step 370: After that, the WebView obtains the original page text of the HTML5 page to determine which parts need to be translated.

[0143] Step 380: The WebView sends a translation request to the translation server, including the current text content that the user needs to translate and the target language (system language) in the translation request.

[0144] Step 390: The WebView checks whether there is a cache for the current text content. When there is no cache, the translation server sends the translation request to the third-party translation API.

[0145] Step 3100: After receiving the translation request, the third-party translation API processes the translation task.

[0146] Step 3110: The third-party translation API returns the translated text in the target language to the translation server.

[0147] Step 3120: The translation server creates a cache for the translated text in the target language.

[0148] Step 3130: The translation server returns the target language translation text to the WebView;

[0149] Step 3140: The WebView operates on the DOM through JavaScript, replaces the corresponding content nodes of the original page with the target language translation text, keeps the original structure and style of the page unchanged, only replaces the text content, and displays the translated page to the user.

[0150] This embodiment relies on the front-end open source technology stack ReactNative;

[0151] With the help of the WebView component of ReactNative, load the HTML5 page to be opened and inject the obtained original page text and the JS script for obtaining translations. Pass the current HTML5 page address in the source parameter and pass the JS script injected into the HTML5 page in the injectedJavaScript:

[0152]

[0153]

[0154]

[0155] Finally, execute the JS script injected into the HTML5 through webviewRef.current.injectJavaScript('window.myInjectedFunction();');

[0156] 3. Dynamic content page.

[0157] In the dynamic news page, the user initially browses an English article, and then scrolls to load multilingual comments (such as "Me gusta este artículo" in Spanish). After the system completes the initial translation, it listens for new comments through MutationObserver and translates them in real time to "I like this article". The translated comments seamlessly integrate into the page, maintaining the continuity of the user experience.

[0158] Figure 4 It is a module schematic diagram of an embodiment of the HTML5 page processing system provided by the present disclosure. As Figure 4 shown, the HTML5 page processing system 400 of the present disclosure includes but is not limited to:

[0159] An extraction module 410 extracts text nodes from the HTML5 page and determines the original page language of the HTML5 page based on the content analysis of the text nodes;

[0160] The translation module 420, when detecting that the original page language is inconsistent with the system language of the user device and meeting the preset trigger conditions, determines the target language according to the system language, and obtains the target language translation text of the original page text of the HTML5 page according to the preset translation strategy;

[0161] The replacement module 430 replaces the original page text of the HTML5 page with the target language translation text and maintains the original page structure.

[0162] In an alternative embodiment, the preset trigger conditions include at least one of the following:

[0163] After the HTML5 page is loaded, it is detected that the original page language of the HTML5 page does not match the system language of the user device;

[0164] When entering the payment page or the settlement page, it is detected that the URL corresponding to the HTML5 page contains a preset payment website domain name;

[0165] The user's stay time on the HTML5 page exceeds the set threshold;

[0166] The user triggers the translation button.

[0167] In an alternative embodiment, the translation button is a floating button in the WebView interface or an interactive component in the HTML5 page.

[0168] In an alternative embodiment, when entering the payment page or the settlement page, the translation module 420 is specifically configured to:

[0169] Identify the HTML elements in the HTML5 page that contain the payment form input fields or the payment instruction text, and obtain the target language translation text of the HTML elements of the payment information while keeping the payment form input fields unchanged.

[0170] In an alternative embodiment, the replacement module 430 is specifically configured to:

[0171] Based on the preset translation strategy, generate a translation request based on the original page text and the target language, and send it to the translation server. The translation server receives the translation request and returns the target language translation text.

[0172] In an alternative embodiment, the replacement module 430 is specifically configured to:

[0173] Encapsulate the original page text and the target language into a translation request in JSON format.

[0174] In an alternative embodiment, the translation server translates the original page text using the following strategy:

[0175] Query the cache based on the hash value of the original page text;

[0176] If the cache is hit, directly return the translated text in the target language that was hit;

[0177] If the cache is not hit, call the translation API to translate the original page text to obtain the translated text in the target language, and store the translated text in the target language in the cache.

[0178] In an alternative embodiment, the replacement module 430 is specifically configured to:

[0179] When the HTML5 page is a static page, traverse the HTML5 page DOM tree, replace the original page text with the translated text in the target language, and keep the original page structure unchanged.

[0180] In an alternative embodiment, the replacement module 430 is specifically configured to:

[0181] When the HTML5 page is a dynamically loaded page, traverse the HTML5 page DOM tree, replace the original page text with the translated text in the target language, and then listen for content changes in the HTML5 page. When a new text node is detected, use the new text node as the text node, return the content analysis based on the text node, and determine the original page language of the HTML5 page.

[0182] In an alternative embodiment, the extraction module 410 is specifically configured to:

[0183] Analyze the content of the text nodes in the HTML5 page based on a language model, calculate the language distribution probability of each text node, and determine the original page language of the HTML5 page based on the language with the highest probability.

[0184] This system realizes the efficient translation of the content of the HTML5 page by performing intelligent language recognition on the content of the text nodes in the HTML5 page, and triggering the automatic translation of the original page text of the HTML page and the accurate replacement of the translated text in the target language when it is detected that the original page language is inconsistent with the system language of the user device, reducing user operations, thereby enhancing the user experience in cross-language interaction and improving the user operation experience.

[0185] This system consists of an extraction module 410, a translation module 420, and a replacement module 430. These modules can be interconnected through data interfaces to jointly implement an HTML5 page processing solution. This system can be embedded into a front-end development tool as an independent software module or provided as a cloud service interface for developers to remotely call.

[0186] An embodiment of the present invention also provides an HTML5 page processing device, including a processor and a memory that stores executable instructions for the processor. Among them, the processor is configured to complete the steps of the HTML5 page processing method by executing the executable instructions.

[0187] As shown above, by using the HTML5 page processing device of the present invention, through intelligent language recognition of the content of text nodes in the HTML5 page and triggering automatic translation of the original page text of the HTML page and accurate replacement of the translated text in the target language when it is detected that the original page language is inconsistent with the system language of the user device, efficient translation of the HTML5 page content is achieved, reducing user operations, thereby enhancing the user experience in cross-language interaction and improving the user operation experience.

[0188] Those skilled in the art can understand that various aspects of the present invention can be implemented as a system, a method, or a program product. Therefore, various aspects of the present invention can be specifically implemented in the following forms, namely: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or an implementation combining hardware and software aspects, which can be collectively referred to as "circuit", "module", or "platform" here.

[0189] Figure 5 is a schematic structural diagram of the HTML5 page processing device of the present invention. The following will refer to Figure 5 to describe the electronic device 500 according to this embodiment of the present invention. Figure 5 The electronic device 500 shown is merely an example and should not impose any limitations on the functions and usage scope of the embodiments of the present invention.

[0190] As Figure 5 shown, the electronic device 500 is presented in the form of a general computing device. The components of the electronic device 500 may include, but are not limited to: at least one processing unit 510, at least one storage unit 520, a bus 530 connecting different platform components (including the storage unit 520 and the processing unit 510), a display unit 540, etc.

[0191] Among them, the storage unit stores program code that can be executed by the processing unit 510, enabling the processing unit 510 to execute the steps according to various exemplary embodiments of the present invention described in the above HTML5 page processing method section of this specification. For example, the processing unit 510 can execute steps such as Figure 1 or Figure 3 as shown.

[0192] The storage unit 520 may include a readable medium in the form of a volatile storage unit, such as a random access storage unit (RAM) 521 and / or a cache storage unit 522, and may further include a read-only storage unit (ROM) 523.

[0193] The storage unit 520 may also include a program / utilities 524 having a set (at least one) of program modules 525. Such program modules 525 include, but are not limited to: a processing system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment.

[0194] The bus 530 may represent one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of a variety of bus structures.

[0195] The electronic device 500 may also communicate with one or more external devices 501 (such as a keyboard, a pointing device, a Bluetooth device, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 500, and / or may communicate with any device that enables the electronic device 500 to communicate with one or more other computing devices (such as a router, a modem, etc.). Such communication may be carried out through an input / output (I / O) interface 550. And, the electronic device 500 may also communicate with one or more networks (such as a local area network (LAN), a wide area network (WAN), and / or a public network, such as the Internet) through a network adapter 560. The network adapter 560 may communicate with other modules of the electronic device 500 through the bus 530. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the electronic device 500, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage platforms, etc.

[0196] Embodiments of the present disclosure also provide a computer-readable storage medium for storing a program that, when executed, implements the steps of the HTML5 page processing method. In some possible implementation manners, various aspects of the present invention can also be implemented in the form of a program product, which includes program code. When the program product runs on a terminal device, the program code is used to cause the terminal device to execute the steps according to various exemplary embodiments of the present invention described in the above HTML5 page processing method section of this specification.

[0197] As Figure 6 shown, a computer program product 600 for implementing the above method according to an embodiment of the present invention may be a portable compact disc read-only memory (CD-ROM) and includes program code, and can run on a terminal device, such as a personal computer. However, the computer program product of the present invention is not limited thereto. In this document, a readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0198] The computer program product may adopt any combination of one or more readable media. The readable media may be a readable signal medium or a readable storage medium. The readable storage medium may, for example, but not be limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0199] The computer-readable storage medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries the readable program code. Such a propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The readable storage medium may also be any readable medium other than the readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination of the above.

[0200] The program code for performing the processing of the present invention can be written in any combination of one or more programming languages, including object-oriented programming languages such as Java, C++, etc., and also including conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computing device, partially on the user's device, executed as a stand-alone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In the case of a remote computing device, the remote computing device can be connected to the user's computing device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computing device (e.g., by connecting through the Internet using an Internet service provider).

[0201] In summary, the object of the present invention is to provide an HTML5 page processing method, device, equipment and storage medium, which realizes intelligent language recognition of the content of text nodes in the HTML5 page, and when it is detected that the original page language is inconsistent with the system language of the user device, triggers automatic translation of the original page text of the HTML page and accurate replacement of the translated text in the target language, so as to achieve efficient translation of the HTML5 page content, reduce user operations, and thus improve the user experience in cross-language interaction and enhance the user operation experience.

[0202] The above content is a further detailed description of the present invention in combination with specific preferred embodiments. It cannot be determined that the specific implementation of the present invention is only limited to these descriptions. For those of ordinary skill in the technical field to which the present invention pertains, without departing from the concept of the present invention, several simple deductions or substitutions can still be made, and all should be regarded as belonging to the protection scope of the present invention.< / form>

Claims

1. A method for processing HTML5 pages, characterized in that: include: Extracting text nodes in the HTML5 page, and determining the original page language of the HTML5 page based on content analysis of the text nodes; When it is detected that the original page language is inconsistent with the system language of the user device and a preset trigger condition is met, a target language is determined according to the system language, and a target language translation text of the original page text of the HTML5 page is obtained according to a preset translation strategy; The original page text of the HTML5 page is replaced with the target language translation text, and the original page structure is maintained.

2. The HTML5 page processing method according to claim 1, characterized in that: The preset trigger condition includes at least one of the following: After the HTML5 page is loaded, it is detected that the original page language of the HTML5 page does not match the system language of the user device; When entering the payment page or the settlement page, it is detected that the URL corresponding to the HTML5 page contains a preset payment website domain name; The user's stay time on the HTML5 page exceeds a set threshold; User triggers the translate button.

3. The HTML5 page processing method according to claim 2, characterized in that: The translation button is a floating button in the WebView interface or an interactive component in the HTML5 page.

4. The HTML5 page processing method according to claim 2, characterized in that: When entering the payment page or the settlement page, obtaining the target language translation text of the original page text of the HTML5 page according to the preset translation strategy includes: An HTML element containing a payment form input field or payment instruction text is identified in the HTML5 page, and a target language translation text of the HTML element of the payment information is obtained while keeping the payment form input field unchanged.

5. The HTML5 page processing method according to claim 1, characterized in that: The step of obtaining the target language translation text of the original page text of the HTML5 page according to a preset translation strategy includes: Based on the preset translation strategy, a translation request is generated based on the original page text and the target language, and sent to a translation server, which receives the translation request and returns the target language translation text.

6. The HTML5 page processing method according to claim 5, characterized in that: The generating a translation request based on the original page text and the target language includes: The original page text and the target language are encapsulated as a translation request in JSON format.

7. The HTML5 page processing method according to claim 5, characterized in that: The translation server uses the following strategy to translate the original page text: Query cache based on the hash value of the original page text; If the cache hits, the target language translation text that hits is directly returned; If the cache does not hit, the translation API is called to translate the original page text to obtain the target language translation text, and the target language translation text is stored in the cache.

8. The HTML5 page processing method according to claim 1, characterized in that: When the HTML5 page is a static page, replacing the original page text of the HTML5 page with the target language translation text includes: The HTML5 page DOM tree is traversed, the original page text is replaced with the target language translation text, and the original page structure is kept unchanged.

9. The HTML5 page processing method according to claim 1, characterized in that: When the HTML5 page is a dynamically loaded page, replacing the original page text of the HTML5 page with the target language translation text includes: The HTML5 page DOM tree is traversed, the original page text is replaced with the target language translation text, and then the content changes in the HTML5 page are monitored. When a new text node is detected, the new text node is used as the text node, and the content analysis based on the text node is returned to determine the original page language of the HTML5 page.

10. The HTML5 page processing method according to claim 1, characterized in that: The determining the original page language of the HTML5 page based on the content analysis of the text node includes: The content of the text nodes in the HTML5 page is analyzed based on the language model, the language distribution probability of each text node is calculated, and the original page language of the HTML5 page is determined based on the language with the highest probability.

11. An HTML5 page processing device, characterized in that: include: An extraction module extracts text nodes in the HTML5 page and determines the original page language of the HTML5 page based on content analysis of the text nodes; A translation module, when detecting that the original page language is inconsistent with the system language of the user device and a preset trigger condition is met, determines a target language according to the system language, and obtains a target language translation text of the original page text of the HTML5 page according to a preset translation strategy; The replacement module replaces the original page text of the HTML5 page with the target language translation text, and maintains the original page structure.

12. An electronic device, characterized in that: include: processor; a memory storing executable instructions of the processor; The processor is configured to execute the steps of the HTML5 page processing method according to any one of claims 1 to 10 by executing the executable instructions.

13. A computer-readable storage medium for storing a program, characterized in that: When the program is executed, the steps of the HTML5 page processing method described in any one of claims 1 to 10 are implemented.

Images