Web page label marking method, electronic device, and storage medium

Abstract

This application provides a webpage tagging method, storage medium, and electronic device. By comparing the first position information of a first webpage tag and the second position information of a second webpage tag, if the second position information differs from the first position information, it indicates that the display style of the first webpage tag has changed after language switching. By tagging the second webpage tag, it is possible to intuitively and quickly determine which first webpage tags on the first webpage have changed their display style when switching to the second webpage tag on the second webpage, without missing any webpage tags whose display style is affected.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and in particular to a webpage tagging method, electronic device, and storage medium. Background Technology

[0002] Website content must be displayed in the form of web pages to be seen by users, and this content is intended for diverse audiences. Users of a website can typically be from any country, necessitating that the web page text content be able to display in multiple languages. For example, text content displayed in Chinese can be shown in English when a user requires it.

[0003] When a webpage switches between multiple languages, the different character lengths in each language can cause display issues with many webpage tags, such as excessively long characters exceeding the display limit or line breaks. These display style problems caused by language switching generally require redesigning and adapting the style information of the webpage tags.

[0004] However, in existing technologies, the method of visually inspecting and identifying which web page tags are affected by language switching is used. After finding these affected tags, the style information is modified and adapted one by one. This method is prone to missing affected tags and is very inefficient. Summary of the Invention

[0005] To overcome the problems existing in related technologies, this application provides a webpage tag marking method, electronic device, and storage medium, which can intuitively and quickly identify webpage tags whose display style is affected when the webpage language is switched, and will not miss webpage tags whose display style is affected.

[0006] According to a first aspect of the embodiments of this application, a webpage tag marking method is provided, comprising the following steps:

[0007] Load the first webpage and obtain at least one first webpage tag information; the first webpage is a webpage displayed in a first language, and the first webpage tag information includes the first language text content of the first webpage tag, the first text content identifier, and the first position information of the first webpage tag on the first webpage;

[0008] Receive a webpage language switching instruction to switch the first webpage to the second webpage, and obtain the second language file; the second webpage is a webpage displayed in the second language, and the second language file includes several second language text contents in the second webpage and a second text content identifier corresponding to each second language text content;

[0009] Based on the first text content identifier and the second text content identifier, determine the target language text content from several second language text contents;

[0010] In the first webpage, the tags of the first webpage are modified according to the target language text content to generate the second webpage and the second webpage tags; the second position information of the second webpage tags on the second webpage is obtained;

[0011] Compare the first position information of each first webpage tag with the second position information of the corresponding second webpage tag; if the second position information is different from the first position information, when displaying the second webpage, display the tag of the second webpage whose second position information is different from the first position information.

[0012] Furthermore, the first webpage tag information also includes the style information of the first webpage tag; the step of modifying the first webpage tag in the first webpage according to the target language text content to generate the second webpage and the second webpage tag includes: in the first webpage, replacing the first language text content with the target language text content according to the style information, and generating the second webpage and the second webpage tag. When the webpage language is switched, the second webpage and the second webpage tag are automatically and quickly generated according to the style information of the first webpage tag and the target language text content.

[0013] Further, the first position information includes first distance values ​​of each edge of the first webpage tag relative to the corresponding edge of the first viewport corresponding to the first webpage; the second position information includes second distance values ​​of each edge of the second webpage tag relative to the corresponding edge of the second viewport corresponding to the second webpage; if the second position information differs from the first position information, the step of displaying a mark indicating that the second webpage tag has different second position information from the first position information when displaying the second webpage includes: if the second distance value of at least one edge is inconsistent with the first distance value, marking a second webpage tag with inconsistent second distance value on the second webpage when displaying the second webpage. By comparing the first distance values ​​of each edge of the first webpage tag relative to the corresponding edge of the first viewport corresponding to the first webpage with the second distance values ​​of each edge of the second webpage tag relative to the corresponding edge of the first viewport corresponding to the second webpage, it can be determined whether the display style of the first webpage tag changes when switching to the second webpage tag.

[0014] Further, the steps of loading the first webpage and obtaining at least one tag information of the first webpage include:

[0015] Obtain the first language file; the first language file includes several text contents and a text content identifier corresponding to each text content; obtain the first position information and style information of the first webpage tag on the first webpage; compare the first language text content with several text contents, and determine the text content identifier corresponding to the text content that matches the first language text content as the first text content identifier; obtain the first webpage tag information based on the first webpage tag, the first text content identifier, the first position information, and the style information. Based on the first language text content of the first language file and the first webpage tag, a correspondence between the first webpage tag and the text content identifier in the first language file can be established, and the first text content identifier can be determined.

[0016] Further, the step of determining the target language text content from several second language text contents based on the first text content identifier and the second text content identifier includes: comparing the first text content identifier with several second text content identifiers to determine the target second text content identifier that matches the first text content identifier; and obtaining the target language text content corresponding to the target second text content identifier from the second language file. Based on the correspondence between the second text content identifier and the second language text content, and the comparison results between the first text content identifier and several second text content identifiers, the target language text content can be determined.

[0017] Furthermore, if the second location information differs from the first location information, the step of displaying a tag indicating that the second webpage's second location information differs from the first location information when displaying the second webpage includes:

[0018] If the second location information differs from the first location information, when displaying the second webpage, a second webpage tag indicating that the second location information differs from the first location information is marked on the second webpage according to a preset marking method. Marking the second webpage tags according to the preset marking method allows for a clear indication of which first webpage tags have changed their display style when switching to the second webpage tag.

[0019] Furthermore, the preset marking methods include any one or more of the following: underline marking, circle marking, frame marking, highlighting with a preset color, and bold font marking. By marking the second webpage tag with underline, circle, frame, highlighting with a preset color, and bold font, it is possible to intuitively know which first webpage tags have changed their display style when switching to the second webpage tag.

[0020] Furthermore, if the second location information differs from the first location information, after the step of displaying the tag indicating that the second location information differs from the first location information when displaying the second webpage, the process includes:

[0021] The style information of the first webpage tag corresponding to the marked second webpage tag is modified. Based on the modified style information of the first webpage tag and the target language text content, the second webpage and the second webpage tag are regenerated until the second position information of the regenerated second webpage tag on the regenerated second webpage is the same as the first position information of the first webpage tag on the first webpage. The style information of the first webpage tag whose display style has changed is modified to ensure that after switching from the first webpage to the second webpage, the display position of the first webpage tag on the first webpage is the same as the display position of the corresponding second webpage tag on the second webpage, avoiding the confusion of webpage tag display styles.

[0022] According to a second aspect of the embodiments of this application, an electronic device is provided, including a display, a processor, and a memory; the memory stores a computer program adapted to be loaded by the processor and executed as described above for web page tagging.

[0023] According to a third aspect of the embodiments of this application, a computer-readable storage medium is provided, on which a computer program is stored, which, when executed by a processor, implements the web page tagging method as described above.

[0024] This application embodiment compares the first position information of a first webpage tag with the second position information of a second webpage tag. If the second position information differs from the first position information, it indicates that the display style of the first webpage tag has changed after language switching. By marking the second webpage tag, it is possible to intuitively and quickly determine which first webpage tags in the first webpage have changed their display style when switching to the second webpage tag of the second webpage, without missing any tags whose display style is affected.

[0025] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application.

[0026] To better understand and implement this invention, the following detailed description is provided in conjunction with the accompanying drawings. Attached Figure Description

[0027] Figure 1 This is a flowchart illustrating a webpage tagging method according to one embodiment of this application;

[0028] Figure 2 This is a schematic block diagram illustrating the structure of a webpage tagging device according to one embodiment of this application;

[0029] Figure 3 This is a schematic block diagram illustrating the structure of an electronic device according to one embodiment of this application. Detailed Implementation

[0030] To make the objectives, technical solutions and advantages of this application clearer, the following will further describe the embodiments of this application in detail with reference to the accompanying drawings.

[0031] It should be clear that the described embodiments are only some of the embodiments of this application, rather than all of them. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in this application without creative efforts belong to the scope of protection of the embodiments of this application.

[0032] When the following description refers to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. In the description of this application, it should be understood that terms such as "first", "second", "third", etc. are only used to distinguish similar objects, and do not necessarily need to describe a specific order or sequence, nor can they be understood as indicating or implying relative importance. For those of ordinary skill in the art, the specific meanings of the above terms in this application can be understood according to specific circumstances. The singular forms of "a", "an", and "the" used in this application and the appended claims are also intended to include the plural forms, unless the context clearly indicates otherwise. The words "if" / "when" used herein can be interpreted as "when...", "when...", or "in response to determination".

[0033] In addition, in the description of this application, unless otherwise specified, "plural" means two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships can exist. For example, A and / or B can represent: A exists alone, A and B exist simultaneously, and B exists alone. The character " / " generally represents an "or" relationship between the associated objects before and after.

[0034] The web page label marking method of the embodiments of this application can be applied to the internationalization scenario of web page multilingualism. Specifically, it can be applied when developing the front-end web page to evaluate the influence range of the target language on the display style of labels in the web page. Generally, when the web page is switched between multiple languages, the text content corresponding to the web page labels in different languages is different. For example, when switching a Chinese web page to an English web page, the web page label "信息" in the Chinese web page corresponds to the web page label "information" in the English web page. Since the number of characters in "信息" and "information" is different, after the language switch, the web page label "information" may be displayed with a font that is too long and exceeds the display area, or it may be displayed in multiple lines, with a different display style from the web page label "信息" before the language switch. These problems with the display style of web page labels caused by language switches, such as a font that is too long and exceeds the display area, or being displayed in multiple lines, generally require re-designing and adapting the style information of the web page labels.

[0035] In the process of realizing this invention, the inventors discovered that in related technologies, after switching multiple languages ​​on a webpage, the process involves visually inspecting and identifying which webpage tags have been affected in terms of display style. After finding these affected tags, the style information of each tag is then modified and adapted one by one. This method is prone to omissions and is very inefficient.

[0036] Therefore, in this embodiment, after a webpage language switch, the display positions of webpage tags are compared between before and after the language switch. If they differ, it indicates that the display style of the webpage tag has changed after the language switch. Marking the webpage tag when displaying the switched webpage allows for a direct and quick identification of which webpage tags have changed their display style after the language switch, ensuring that no affected tags are overlooked.

[0037] Based on this, this application proposes a webpage tag marking method, apparatus, storage medium, and electronic device.

[0038] Please see Figure 1 The webpage tagging method provided in this application includes:

[0039] S10: Load the first webpage and obtain at least one first webpage tag information; the first webpage is a webpage displayed in a first language, and the first webpage tag information includes the first language text content of the first webpage tag, the first text content identifier, and the first position information of the first webpage tag on the first webpage.

[0040] The first language includes, but is not limited to, Simplified Chinese, Traditional Chinese, English, Spanish, and Arabic.

[0041] Once the first webpage is loaded, it displays multiple "first webpage tags". These tags are text tags, including but not limited to heading tags, paragraph tags, and list tags.

[0042] The first language text content of the first webpage tag is the text content of the first webpage tag in its first language. For example, if the first webpage tag is the title tag "Basic Information", then the first language text content of the first webpage tag is "Basic Information".

[0043] The first text content identifier is used to uniquely identify the first language text content. Specifically, the first text content identifier can be numbers, letters, characters, and strings, etc.

[0044] The first location information is used to indicate the display position of the first webpage tag on the first webpage.

[0045] In this embodiment, the execution entity of the webpage tag marking method is a webpage tag marking device, which can be a browser. The browser obtains the HTML source file of the first webpage, parses and renders it to load the first webpage. The first language is Simplified Chinese, the first webpage is a Simplified Chinese webpage, and the first webpage tag is a Simplified Chinese webpage tag.

[0046] Browsers can retrieve the first-language text content and the first text content identifier of the first webpage tag from the Document Object Model (DOM) after the first-language HTML file has been parsed. They can also obtain the first position information of the first webpage tag within the first webpage through the browser's API.

[0047] S20: Receive a webpage language switching instruction to switch the first webpage to the second webpage, and obtain the second language file; the second webpage is a webpage displayed in the second language, and the second language file includes several second language text contents in the second webpage and a second text content identifier corresponding to each second language text content.

[0048] The webpage language switching instruction is used to switch the language of the first webpage from the first language to the second language, thus obtaining the second webpage. Specifically, the webpage language switching instruction includes the language type of the second language. The second language includes, but is not limited to, Simplified Chinese, Traditional Chinese, English, Spanish, and Arabic.

[0049] The second language file stores the text content set of each webpage tag displayed in the second webpage, as well as the text content identifier set. Specifically, the second language file is a JSON file.

[0050] The second language text content refers to the text content of each webpage tag in the second webpage under the second language tag. The second text content identifier is used to uniquely identify the second language text content. Specifically, the second text content identifier can be numbers, letters, characters, and strings, etc.

[0051] In this embodiment, a language switching button is provided on the first webpage. When the user clicks the language switching button, a pop-up window displays multiple language options for the user to choose from. The user can select a language by clicking with a mouse, typing on a keyboard, or using a touchscreen; no specific method is specified here.

[0052] The system receives a webpage language switching instruction to switch from the first webpage to the second webpage, which could be a user's language selection instruction. Based on the language selection instruction, it retrieves the corresponding language file. In this case, if the user selects English, the retrieved second language file will be an English language file.

[0053] S30: Determine the target language text content from a plurality of second language text contents based on the first text content identifier and the second text content identifier.

[0054] The target language text content is the text content corresponding to the first text content in the second language. For example, if the first text content is "Basic Information", the target language text content is "Basic Information".

[0055] In this embodiment of the application, the first text content identifier and the second text content identifier can be matched, and the target language text content corresponding to the first text content identifier can be determined based on the correspondence between the second text content identifier and the second language text content.

[0056] S40: In the first webpage, modify the first webpage tags according to the target language text content to generate a second webpage and second webpage tags; obtain the second position information of the second webpage tags on the second webpage.

[0057] The second location information is used to indicate the display position of the second webpage tag on the second webpage.

[0058] In this embodiment, the first language text content and style information of the first webpage tag can be copied to obtain an intermediate webpage tag. The text content of the intermediate webpage tag is then replaced with the target language text content to obtain a second webpage tag. Alternatively, the first language text content of the first webpage tag can be copied, and an intermediate webpage tag can be generated based on preset tag style information and the first language text content. The text content of the intermediate webpage tag is then replaced with the target language text content to obtain a second webpage tag.

[0059] In the first webpage, replace the first webpage tag with the second webpage tag to obtain the second webpage. Then, obtain the second position information of the second webpage tag on the second webpage through the browser's API interface.

[0060] S50: Compare the first position information of each first webpage tag with the second position information of the corresponding second webpage tag; if the second position information is different from the first position information, when displaying the second webpage, display the mark of the second webpage tag whose second position information is different from the first position information.

[0061] The text content and style information of webpage tags determine their display position on a webpage. Specifically, when a webpage tag in the first language is switched to a webpage tag in the second language, if the style information of the first and second webpage tags are the same, but the number of characters occupied by the text content of the first and second webpage tags differs, then the display position of the first webpage tag on the first webpage and the display position of the second webpage tag on the second webpage may also differ. For example, if the style information of both the first and second webpage tags is "font size 10", and the text content of the first webpage tag is "information" while the text content of the second webpage tag is "information", then the second webpage tag, with its larger text content, occupies more space on the webpage than the first webpage tag, resulting in a different position for the second webpage tag compared to the first webpage tag.

[0062] When switching from a first webpage tag in the first language to a second webpage tag in the second language, if the style information of the first webpage tag and the style information of the second webpage tag are different, but the number of characters occupied by the text content is the same, the display position of the first webpage tag in the first webpage and the display position of the second webpage tag in the second webpage may also be different. For example, if the style information of the first webpage tag is "font size 10" and the style information of the second webpage tag is "font size 20", and the text content of the first webpage tag is "age", then the second webpage tag occupies more space on the webpage than the first webpage tag, resulting in a different position information for the second webpage tag compared to the first webpage tag.

[0063] When a webpage switches languages, the different position information of webpage tags can cause the display style of webpage tags to become disordered. For example, the font may be too long and exceed the display limit, or it may be displayed on a new line. The style information of webpage tags needs to be redesigned and adapted.

[0064] In this embodiment of the application, considering that the second webpage tag is generated based on the style information of the first webpage tag and the target language text content, although the style information of the second webpage tag is the same as that of the first webpage tag, the text content (target language text content) of the second webpage tag is different from the first language text content of the first webpage tag. Therefore, the display position of the second webpage tag on the first webpage may be different from that of the first webpage tag on the first webpage.

[0065] If the second webpage tag is displayed in a different position on the second webpage than the first webpage tag is displayed on the first webpage, it means that the display style of the first webpage tag has changed after the language switch, and the second webpage tag is marked.

[0066] If the display position of the second web page label on the second web page is the same as the display position of the first web page label on the first web page, it indicates that after the language switch of the first web page label, the display style of the first web page label has not changed, and there is no need to mark the second web page label.

[0067] Among them, the methods of marking the second web page label include but are not limited to underlining and drawing.

[0068] When displaying the second web page, marking the second web page label with different second position information and first position information can visually and quickly determine which first web page labels on the first web page have changed in display style when switched to the second web page label, and will not miss the web page labels whose display styles are affected.

[0069] Applying the embodiments of the present application, by comparing the first position information of the first web page label and the second position information of the second web page label, if the second position information is different from the first position information, it indicates that after the language switch of the first web page label, the display style of the first web page label has changed. By marking the second web page label, it can be visually and quickly determined which first web page labels on the first web page have changed in display style when switched to the second web page label, and will not miss the web page labels whose display styles are affected.

[0070] In an optional embodiment, step S10 includes steps S101 to S104, which are specifically as follows:

[0071] S101: Obtain the first language file; the first language file includes several text contents and the text content identifiers corresponding to each text content.

[0072] Among them, the first language file is used to save the text content set and text content identifier set of each web page label displayed on the web page in the first language. Specifically, the first language file is a JSON file.

[0073] In the embodiments of the present application, the first language file can be obtained from the browser local cache, or the browser can download the first language file from the server. Among them, the first language file is a JSON file in simplified Chinese, including several key-value pairs. Among them, the key value represents the text content identifier, and the value represents the text content. For example, a key-value pair is "BasicInformation": "Basic Information", the key value is BasicInformation, and the value is Basic Information.

[0074] S102: Obtain the first position information of the first webpage tag on the first webpage and the style information of the first webpage tag.

[0075] The style information of the first webpage tag is used to indicate the font, color, font weight, and other attributes of the first webpage tag when it is displayed on the first webpage. Specifically, the style information of the first webpage tag is stored in a CSS stylesheet, which can be independent of the HTML source file or written into the HTML source file.

[0076] In this embodiment of the application, the first position information of the first webpage tag on the first webpage can be obtained through the browser's API interface, and the style information of the first webpage tag can be obtained from the HTML file in the first language.

[0077] S103: Compare the first language text content with several text contents, and determine the text content identifier corresponding to the text content that is consistent with the first language text content as the first text content identifier.

[0078] In this embodiment, the first language text content is compared one by one with several text contents, and based on the correspondence between text content and text content identifier, the first text content identifier corresponding to the first language text content can be determined. For example, if the first language text content is "basic information", and based on the key-value pair "BasicInformation" "basic information", the first text content identifier is BasicInformation.

[0079] S104: Obtain the first webpage tag information based on the first webpage tag, the first text content identifier, the first position information, and the style information.

[0080] In this embodiment of the application, after obtaining the first text content identifier, the display position of the first webpage tag on the first webpage, and the style information of the first webpage tag, this information can be stored as the first webpage tag information for subsequent browser retrieval.

[0081] Based on the first language file and the first language text content of the first webpage tag, a correspondence between the first webpage tag and the text content identifier in the first language file can be established, and the first text content identifier can be determined.

[0082] In an optional embodiment, step S30 includes steps S301 to S302, as follows:

[0083] S301: Compare the first text content identifier with several second text content identifiers to determine the target second text content identifier that is consistent with the first text content identifier.

[0084] In the context of multilingual webpage internationalization, the text content identifiers in the language files of each language type are consistent.

[0085] In this embodiment, the second language file is an English JSON file, including several key-value pairs. The key represents a second text content identifier, and the value represents the second language text content. For example, a key-value pair could be "BasicInformation" and "Basic Information," where the key is "BasicInformation" and the value is "Basic Information."

[0086] By comparing the first text content identifier with each second text content identifier one by one, if the first text content identifier is the same as the current second text content identifier, the current second text content identifier is determined as the target second text content identifier.

[0087] S302: Obtain the target language text content corresponding to the target second text content identifier from the second language file.

[0088] In this embodiment, based on the correspondence between the second text content identifier and the second language text content, the second text content corresponding to the target second text content identifier can be directly obtained from the second language file, and the second text content corresponding to the target second text content identifier can be used as the target language text content. For example, if the first text content identifier is "BasicInformation", then the target second text content identifier is also "BasicInformation", and the target language text content is "Basic Information".

[0089] Based on the correspondence between the second text content identifier and the second language text content, and the comparison results between the first text content identifier and several second text content identifiers, the target language text content can be determined.

[0090] In an optional embodiment, the first webpage tag information further includes style information of the first webpage tag. Step S40 includes step S401, which is as follows:

[0091] S401: In the first webpage, based on the style information, replace the first language text content with the target language text content, and generate the second webpage tag.

[0092] In this embodiment, the browser parses the style information of the first webpage tag to obtain the style parsing result. Based on the style parsing result, the browser renders the target language text content and generates a second webpage tag in the first webpage to replace the first webpage tag, thus completing the language switching of the first webpage tag.

[0093] When switching webpage languages, a second webpage and its corresponding tags are automatically and quickly generated based on the style information of the first webpage tag and the target language text content.

[0094] In an optional embodiment, the first location information includes a first distance value of each edge of the first webpage tag relative to the corresponding edge of the first viewport corresponding to the first webpage, and the second location information includes a second distance value of each edge of the second webpage tag relative to the corresponding edge of the first viewport corresponding to the first webpage. Step S50 includes step S501, which is as follows:

[0095] S501: If there is a second distance value for at least one edge that is inconsistent with the first distance value, when displaying the second webpage, mark the second webpage with a label indicating that the second distance value is inconsistent with the first distance value.

[0096] The first viewport and the second viewport refer to the visible areas within the browser window. The first viewport is used to display the first webpage, and the second viewport is used to display the second webpage. Specifically, the first viewport is a rectangular area, including its left edge, right edge, top edge, and bottom edge. The second viewport is a rectangular area, including its left edge, right edge, top edge, and bottom edge.

[0097] The first webpage tag can be understood as a rectangular area in the display area of ​​the first webpage, including the left edge, right edge, top edge and bottom edge.

[0098] The second webpage tag can be understood as a rectangular area in the display area of ​​the second webpage, including the left edge, right edge, top edge, and bottom edge.

[0099] In this embodiment, the browser's API is invoked to obtain the first distance values ​​of each edge of the first webpage tag relative to the corresponding edge of the first viewport of the first webpage, and the second distance values ​​of each edge of the second webpage tag relative to the corresponding edge of the second viewport of the second webpage. Specifically, the `getBoundingClientRect` method can be called, which returns the size of a webpage tag and its position relative to the viewport. Calling this method returns a `DOMRect` object containing attributes such as "left", "right", "bottom", "top", "height", and "width". "left" represents the distance of the left edge of the tag relative to the left edge of the viewport, "right" represents the distance of the right edge of the tag relative to the right edge of the viewport, "bottom" represents the distance of the bottom edge of the tag relative to the bottom edge of the viewport, "top" represents the distance of the top edge of the tag relative to the top edge of the viewport, "height" represents the height of the tag, and "width" represents the width of the tag.

[0100] In this embodiment, by comparing the first distance value and the second distance value of the left edge, right edge, top edge, and bottom edge, if the second distance value of at least one edge is inconsistent with the first distance value of that edge, it indicates that the display style of the first webpage tag has changed when switching to the second webpage tag, and the second webpage tag is marked. If the second distance value of each edge is the same as the first distance value of that edge, it indicates that the display style of the first webpage tag has not changed when switching to the second webpage tag, and there is no need to mark the second webpage tag.

[0101] By comparing the first distance values ​​of each edge of the first webpage tag relative to the corresponding edge of the first viewport of the first webpage with the second distance values ​​of each edge of the second webpage tag relative to the corresponding edge of the first viewport of the second webpage, it can be determined whether the display style of the first webpage tag changes when switching to the second webpage tag.

[0102] In an optional embodiment, step S50 includes step S51, which is as follows:

[0103] S51: If the second location information is different from the first location information, when displaying the second webpage, mark the second webpage with a tag indicating that the second location information is different from the first location information according to a preset marking method.

[0104] The preset marking method can be to mark the entire text content of the second webpage tag, for example, by selecting the entire text content of the second webpage tag. Or it can be to mark a portion of the text content of the second webpage tag, for example, by circling a portion of the text content.

[0105] In this embodiment, an outer border can be added to a second webpage tag whose display style differs from that of the first webpage tag. This outer border encloses the entire text content of the second webpage tag. For example, a red outer border with a pixel value of 1 can be added to the second webpage tag.

[0106] By marking the second webpage tabs according to the preset annotation method, it is possible to intuitively know which first webpage tabs have changed their display style when switching to the second webpage tab.

[0107] In an optional embodiment, the preset marking method includes any one or more of the following: underline marking, circle marking, frame marking, marking highlighted with a preset color, and bold font marking.

[0108] In this embodiment, an underline can be added below the text content of the second webpage tag, the text content of the second webpage tag can be circled, a border of a preset color can be added to the text content of the second webpage tag, each character in the text content of the second webpage tag can be highlighted in a preset color, and each character in the text content of the second webpage tag can be bolded. By marking the second webpage tag with underlines, circles, borders, highlighting in a preset color, and bolding, it is possible to intuitively know which first webpage tags have changed their display style when switching to the second webpage tag.

[0109] In an optional embodiment, step S50 is followed by step S60, which is as follows:

[0110] S60: Modify the style information of the first webpage tag corresponding to the marked second webpage tag, and regenerate the second webpage and the second webpage tag according to the modified style information of the first webpage tag and the target language text content, until the second position information of the regenerated second webpage tag on the regenerated second webpage is the same as the first position information of the first webpage tag on the first webpage.

[0111] In this embodiment, after determining which first webpage tags have changed their display style when switching to second webpage tags, the style information of the first webpage tags whose display style has changed is modified, thereby ensuring that after the first webpage switches to the second webpage, the display position of the first webpage tag in the first webpage is the same as the display position of the corresponding second webpage tag in the second webpage, thus avoiding confusion in the display style of webpage tags.

[0112] Please see Figure 2 The webpage tagging device 6 provided in this application embodiment includes:

[0113] The tag information acquisition module 61 is used to load the first webpage and acquire at least one tag information of the first webpage; the first webpage is a webpage displayed in a first language, and the first webpage tag information includes the first language text content of the first webpage tag, the first text content identifier, and the first position information of the first webpage tag on the first webpage;

[0114] The second language file acquisition module 62 is used to receive a webpage language switching instruction to switch the first webpage to the second webpage and acquire the second language file; the second webpage is a webpage displayed in the second language, and the second language file includes several second language text contents in the second webpage and a second text content identifier corresponding to each second language text content;

[0115] The text content determination module 63 is used to determine the target language text content from a plurality of second language text contents based on a first text content identifier and a second text content identifier.

[0116] The second location information acquisition module 64 is used to modify the tags of the first webpage according to the target language text content in the first webpage to generate a second webpage and second webpage tags; and to obtain the second location information of the second webpage tags on the second webpage.

[0117] The second webpage tag marking module 65 is used to compare the first position information of each first webpage tag with the second position information of the corresponding second webpage tag; if the second position information is different from the first position information, when displaying the second webpage, a mark of the second webpage tag whose second position information is different from the first position information is displayed.

[0118] By comparing the first position information of the first webpage tag and the second position information of the second webpage tag using the embodiments of this application, if the second position information differs from the first position information, it indicates that the display style of the first webpage tag has changed after language switching. By marking the second webpage tag, it is possible to intuitively and quickly determine which first webpage tags in the first language webpage have changed their display style when switching to the second language webpage, without missing any webpage tags whose display style is affected.

[0119] This application also provides a device embodiment that can be used to execute the webpage tagging method described in the embodiments of this application. For details not disclosed in the device embodiments of this application, please refer to the content of the webpage tagging method described in the embodiments of this application.

[0120] Please see Figure 3This application also provides an electronic device 300, which can be a computer, a web page tagging device, etc. In an exemplary embodiment of this application, the electronic device 300 is a web page tagging device, which includes: at least one processor 301, at least one memory 302, at least one display, at least one network interface 303, a user interface 304, and at least one communication bus 305.

[0121] The user interface 304 is primarily used to provide an input interface for the user and to acquire user input data. Optionally, the user interface may also include a standard wired interface or a wireless interface.

[0122] The network interface 303 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface).

[0123] The communication bus 305 is used to enable communication between these components.

[0124] The processor 301 may include one or more processing cores. The processor connects to various parts of the electronic device using various interfaces and lines, and performs various functions and processes data by running or executing instructions, programs, code sets, or instruction sets stored in memory, and by calling data stored in memory. Optionally, the processor may be implemented using at least one hardware form of Digital Signal Processing (DSP), Field-Programmable Gate Array (FPGA), or Programmable Logic Array (PLA). The processor may integrate one or a combination of several of the following: Central Processing Unit (CPU), Graphics Processing Unit (GPU), and modem. The CPU primarily handles the operating system, user interface, and applications; the GPU is responsible for rendering and drawing the content required for display; and the modem handles wireless communication. It is understood that the modem may also be implemented as a separate chip without being integrated into the processor.

[0125] The memory 302 may include random access memory (RAM) or read-only memory. Optionally, the memory may include a non-transitory computer-readable storage medium. The memory can be used to store instructions, programs, code, code sets, or instruction sets. The memory may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function (such as touch functionality, sound playback functionality, image playback functionality, etc.), instructions for implementing the various method embodiments described above, etc.; the data storage area may store data involved in the various method embodiments described above, etc. Optionally, the memory may also be at least one storage device located remotely from the aforementioned processor. Figure 3 As shown, a memory, as a computer storage medium, may include an operating system, a network communication module, a user interface module, and operating applications.

[0126] The processor can be used to call the application program of the web page tagging device stored in the memory and specifically execute the method steps of the above-described embodiments. For the specific execution process, please refer to the detailed description shown in the method embodiments, which will not be repeated here.

[0127] This application also provides a computer-readable storage medium having a computer program stored thereon, the instructions of which are adapted to be loaded by a processor and executed by the method steps of the embodiments shown above. For a detailed description of the execution process, please refer to the embodiments, which will not be repeated here. The device containing the storage medium can be an electronic device such as a personal computer, laptop computer, smartphone, tablet computer, or web page tagging device.

[0128] For the device embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to in the description of the method embodiments. The device embodiments described above are merely illustrative, wherein the components described as separate parts may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this application according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0129] Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0130] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart... Figure 1 One or more processes and / or boxes Figure 1 The computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function selected in one or more boxes.

[0131] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function selected in one or more boxes.

[0132] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0133] Memory may include non-persistent memory in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0134] Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information using any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0135] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0136] The above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

Claims

1. A method of marking a web page tag, characterized by, Includes the following steps: Load a first webpage and obtain at least one first webpage tag information; the first webpage is a webpage displayed in a first language, and the first webpage tag information includes the first language text content of the first webpage tag, the first text content identifier, and the first position information of the first webpage tag on the first webpage; Receive a webpage language switching instruction to switch the first webpage to the second webpage, and obtain a second language file; the second webpage is a webpage displayed in a second language, and the second language file includes several second language text contents in the second webpage and a second text content identifier corresponding to each second language text content; Based on the first text content identifier and the second text content identifier, determine the target language text content from a plurality of second language text contents; In the first webpage, the tags of the first webpage are modified according to the target language text content to generate a second webpage and second webpage tags; Obtain the second position information of the second webpage tag on the second webpage; Compare the first position information of each first webpage tag with the second position information of the corresponding second webpage tag; if the second position information is different from the first position information, when displaying the second webpage, display the mark of the second webpage tag whose second position information is different from the first position information.

2. The webpage tag marking method according to claim 1, characterized in that: The first webpage tag information also includes the style information of the first webpage tag; The step of modifying the tags of the first webpage according to the target language text content to generate a second webpage and second webpage tags includes: In the first webpage, based on the style information, the first language text content is replaced with the target language text content, and a second webpage and second webpage tags are generated.

3. The webpage tag marking method according to claim 1, characterized in that: The first location information includes the first distance value of each edge of the first webpage tag relative to the corresponding edge of the first viewport corresponding to the first webpage; The second location information includes second distance values ​​of each edge of the second webpage tag relative to the corresponding edge of the second viewport of the second webpage; The step of displaying a tag indicating that the second webpage has different location information from the first location information when displaying the second webpage includes: If the second distance value of at least one edge is inconsistent with the first distance value, when displaying the second webpage, a second webpage tag indicating that the second distance value is inconsistent with the first distance value is marked on the second webpage.

4. The webpage tagging method according to any one of claims 1 to 3, characterized in that: The step of loading the first webpage and obtaining at least one first webpage tag information includes: Obtain a first language file; the first language file includes several text contents and a text content identifier corresponding to each text content. Obtain the first position information of the first webpage tag on the first webpage and the style information of the first webpage tag; The first language text content is compared with several text contents, and the text content identifier corresponding to the text content that is consistent with the first language text content is determined as the first text content identifier. The first webpage tag information is obtained based on the first webpage tag, the first text content identifier, the first location information, and the style information.

5. The webpage tag marking method according to any one of claims 1 to 3, characterized in that: The step of determining the target language text content from a plurality of second language text contents based on the first text content identifier and the second text content identifier includes: The first text content identifier is compared with several second text content identifiers to determine a target second text content identifier that is consistent with the first text content identifier. Obtain the target language text content corresponding to the target second text content identifier from the second language file.

6. The webpage tagging method according to any one of claims 1 to 3, characterized in that: The step of displaying a tag indicating that the second webpage has different location information from the first location information when displaying the second webpage includes: If the second location information is different from the first location information, when displaying the second webpage, a second webpage tag indicating that the second location information is different from the first location information is marked on the second webpage according to a preset marking method.

7. The webpage tag marking method according to claim 6, characterized in that: The preset marking methods include any one or more of the following: underline marking, circle marking, frame marking, marking highlighted with a preset color, and bold font marking.

8. The webpage tagging method according to any one of claims 1 to 3, characterized in that: The step of displaying a tag indicating that the second webpage has different location information from the first location information when displaying the second webpage includes: The style information of the first webpage tag corresponding to the marked second webpage tag is modified. Based on the modified style information of the first webpage tag and the target language text content, the second webpage and the second webpage tag are regenerated until the second position information of the regenerated second webpage tag on the regenerated second webpage is the same as the first position information of the first webpage tag on the first webpage. 9.An electronic device comprising a display, a processor, and a memory; characterized in that, The memory stores a computer program adapted to be loaded by the processor and executed as described in any one of claims 1 to 8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by a processor, the computer program implements the web page tagging method as described in any one of claims 1 to 8.

Images