CN114741632A - Method for displaying keywords in webpage and related product thereof - Google Patents
Method for displaying keywords in webpage and related product thereof Download PDFInfo
- Publication number
- CN114741632A CN114741632A CN202210345463.6A CN202210345463A CN114741632A CN 114741632 A CN114741632 A CN 114741632A CN 202210345463 A CN202210345463 A CN 202210345463A CN 114741632 A CN114741632 A CN 114741632A
- Authority
- CN
- China
- Prior art keywords
- keyword
- keywords
- highlight
- search
- highlight layer
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 65
- 239000003086 colorant Substances 0.000 claims description 12
- 238000010586 diagram Methods 0.000 description 19
- 230000008569 process Effects 0.000 description 19
- 238000012545 processing Methods 0.000 description 16
- 230000000694 effects Effects 0.000 description 14
- 239000008186 active pharmaceutical agent Substances 0.000 description 12
- 230000008859 change Effects 0.000 description 9
- 230000009471 action Effects 0.000 description 7
- 238000004590 computer program Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 7
- 239000000047 product Substances 0.000 description 6
- 238000004364 calculation method Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 238000013507 mapping Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 238000004422 calculation algorithm Methods 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 230000003796 beauty Effects 0.000 description 1
- 230000027455 binding Effects 0.000 description 1
- 230000021615 conjugation Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 239000013589 supplement Substances 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9532—Query formulation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9538—Presentation of query results
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Mathematical Physics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The embodiment of the invention provides a method for displaying keywords in a webpage and a related product. The method comprises the following steps: responding to the display requirement of the keywords in the webpage, and acquiring a search result about the keywords; and drawing a highlight layer related to the keywords in the webpage according to the search result so as to finish displaying one or more keywords. Through the scheme of the invention, the display of one or more keywords can be realized on the premise of not changing the DOM structure of the search area.
Description
Technical Field
The embodiment of the invention relates to the technical field of Internet, in particular to a method for showing keywords in a webpage, equipment for executing the method and a computer-readable storage medium.
Background
This section is intended to provide a background or context to the embodiments of the invention that are recited in the claims. The description herein may include concepts that could be pursued, but are not necessarily ones that have been previously conceived or pursued. Thus, unless otherwise indicated herein, what is described in this section is not prior art to the description and claims in this application and is not admitted to be prior art by inclusion in this section.
To quickly help users find content on a Web page, websites typically provide search functionality and highlight search keywords. Typically, the highlighting of the keywords may involve modifying the web page of the search area, which in turn may result in a change in the DOM structure of the search area. In some scenarios, modifying the search area to cause a change in the DOM structure may have side effects. For example, some actions (e.g., "click") may be bound to some tags in the search area of the web page, the change in the DOM structure may cause the loss of the binding actions, and the actions have to be re-bound, which results in a very cumbersome implementation process of the whole keyword exposure.
Disclosure of Invention
The known display process of the keywords in the webpage is tedious and has an undesirable display effect, which is a very annoying process.
Therefore, an improved method for displaying keywords in a web page and related products thereof are needed, which can realize the display of the keywords according to a highlight layer drawn by a search result of the keywords without modifying a DOM structure of a search area.
In this context, embodiments of the present invention are intended to provide a method for presenting keywords in a web page and a related product.
In a first aspect of embodiments of the present invention, a method for displaying keywords in a web page is provided, including: responding to the display requirement of the keywords in the webpage, and acquiring a search result about the keywords; and drawing a highlight layer related to the keywords in the webpage according to the search result so as to finish displaying one or more keywords.
In one embodiment of the present invention, the search result includes search results for keywords obtained in units of search units, and the search result of each search unit includes the keywords and position information of the keywords in a document object model tree of an HTML document of the web page.
In another embodiment of the present invention, the drawing a highlight layer on the keyword in the web page according to the search result comprises: traversing the search result in the search unit to acquire the position and the position occupation information of the keyword in the two-dimensional coordinate system of the webpage; and drawing the highlight layer according to the position and the occupation information of the acquired keywords in the two-dimensional coordinate system.
In another embodiment of the present invention, the acquiring the position and the placeholder information of the keyword in the two-dimensional coordinate system of the web page includes: creating a Range object for each search result in the search unit; and acquiring a coordinate information list of all contents in the Range object Range by using a coordinate acquisition interface so as to acquire the position and the occupation information of the keyword in the two-dimensional coordinate system of the webpage.
In still another embodiment of the present invention, wherein the position information of the keyword in the document object model tree includes a start text node, an end text node, a start position in the text content of the start text node, and an end position in the text content of the end text node matched by the keyword, creating a Range object for each search result in the search unit includes: creating a Range object Range; determining a starting position of a starting text node matched with the keyword or in the text content of the starting text node as a starting position of the rang object; and determining the ending text node matched by the keyword or the ending position in the text content of the ending text node as the ending position of the rang object.
In an embodiment of the present invention, the drawing the highlight layer according to the acquired position and occupancy information of the keyword in the two-dimensional coordinate system includes: drawing a highlight layer at least covering the searching area of the webpage, wherein the searching area contains the keywords; and adjusting the highlight layer according to the position and the occupation information of the keywords in the two-dimensional coordinate system, so that the keywords below the highlight layer are displayed based on the adjusted highlight layer.
In another embodiment of the present invention, rendering a highlight layer that overlays at least the search area of the web page comprises: creating a highlight container and container elements for the highlight layer; and adjusting the properties of the highlight container and/or the container elements so that the highlight layer is at least overlaid over the search area.
In one embodiment of the present invention, adjusting the highlight layer to display the keywords located below the highlight layer based on the adjusted highlight layer comprises: and adding a highlight element into the highlight container according to the position and the occupancy information of the keyword in the two-dimensional coordinate system, so that the highlight element and the keyword are fused and displayed simultaneously.
In another embodiment of the present invention, adding a highlight element in the highlight container comprises: creating and adding the highlight element to the higher-level container; according to the position and the occupation information of the keywords in the two-dimensional coordinate system, the position and the occupation information of the highlight element in the highlight container are determined, so that the highlight element is displayed in the highlight container and covers the corresponding keywords; adding a highlight display style for the highlight element according to the display requirement; and adjusting the attribute of the highlight element to enable the highlight element to be fused with the keywords covered by the highlight element.
In yet another embodiment of the present invention, wherein the container element is filled with a translucent or opaque color, adjusting the highlight layer to display the keyword located below the highlight layer based on the adjusted highlight layer comprises: and removing the color filled by the container element at the corresponding position in the highlight layer according to the position and the occupancy information of the keyword in the two-dimensional coordinate system so as to display the keyword below the highlight layer.
In another embodiment of the present invention, adjusting the highlight layer to display the keywords located below the highlight layer based on the adjusted highlight layer includes: and according to the position and the occupation information of the keyword in the two-dimensional coordinate system, performing color filling on the container element at the corresponding position in the highlight layer so as to simultaneously display the filled color and the keyword below the color.
In a second aspect of embodiments of the present invention, there is provided an apparatus comprising: a processor; and a memory storing computer instructions for exposing keywords in a web page, which when executed by the processor, cause the apparatus to perform the method according to the preceding and following embodiments.
In a third aspect of embodiments of the present invention, there is provided a computer readable storage medium containing program instructions for exposing keywords in a web page, which when executed by a processor, cause the apparatus to perform a method according to the foregoing and in various embodiments below.
According to the method for displaying the keywords in the webpage and the related product thereof, the search result of the keywords in the webpage can be used for drawing the highlight layer, so that the keywords can be displayed based on the drawn highlight layer. Therefore, the display of the keywords can be realized on the premise of not changing the DOM structure of the search area, so that side effects (for example, the situation that bound actions are lost and other services are interfered) caused by the change of the DOM structure can be effectively avoided. Meanwhile, when the keywords are displayed by the highlight layer, the number of the keywords is not limited, and the multiple keywords can be displayed simultaneously according to the search result, so that different display requirements of the user are met. In some embodiments of the present invention, the search result may be obtained according to the search unit semantically related to the text content of the web page, so that the comprehensiveness and accuracy of the keyword search may be ensured.
In addition, in other embodiments of the present invention, in the process of adjusting the highlight layer, different keywords may be displayed simultaneously in different colors by adjusting the display style or the filling color of the highlight element.
In addition, when the searched keyword changes, the highlight layer only needs to be redrawn according to the search result of the changed keyword, so that the scheme of the invention has better performance and optimized space.
Drawings
The above and other objects, features and advantages of exemplary embodiments of the present invention will become readily apparent from the following detailed description read in conjunction with the accompanying drawings. Several embodiments of the invention are illustrated by way of example, and not by way of limitation, in the figures of the accompanying drawings and in which:
FIG. 1 schematically illustrates a block diagram of an exemplary computing system 100 suitable for implementing embodiments of the present invention;
FIG. 2 schematically illustrates a flow diagram of a method for exposing keywords in a web page according to one embodiment of the invention;
FIG. 3 is a schematic diagram illustrating a method for presenting keywords in a web page according to another embodiment of the invention;
FIG. 4 schematically illustrates a flow diagram of a method of traversing a document object model tree, according to an embodiment of the present invention;
FIG. 5 schematically shows a flow diagram of a method of obtaining a search unit according to an embodiment of the invention;
FIG. 6 schematically shows a flowchart of a method of obtaining search results according to an embodiment of the invention;
FIG. 7A schematically illustrates a highlighting effect according to one embodiment of the present invention;
FIG. 7B schematically illustrates a highlighting effect according to another embodiment of the present invention;
FIG. 7C schematically illustrates a highlighting effect according to yet another embodiment of the present invention;
fig. 8 schematically shows a schematic block diagram of an apparatus according to an embodiment of the present invention.
In the drawings, like or corresponding reference characters designate like or corresponding parts.
Detailed Description
The principles and spirit of the present invention will be described with reference to a number of exemplary embodiments. It is understood that these embodiments are given solely for the purpose of enabling those skilled in the art to better understand and to practice the invention, and are not intended to limit the scope of the invention in any way. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
FIG. 1 illustrates a block diagram of an exemplary computing system 100 suitable for implementing embodiments of the present invention. As shown in fig. 1, computing system 100 may include: a Central Processing Unit (CPU)101, a Random Access Memory (RAM)102, a Read Only Memory (ROM)103, a system bus 104, a hard disk controller 105, a keyboard controller 106, a serial interface controller 107, a parallel interface controller 108, a display controller 109, a hard disk 110, a keyboard 111, a serial external device 112, a parallel external device 113, and a display 114. Among these devices, coupled to the system bus 104 are a CPU 101, a RAM 102, a ROM 103, a hard disk controller 105, a keyboard controller 106, a serial controller 107, a parallel controller 108, and a display controller 109. The hard disk 110 is coupled to the hard disk controller 105, the keyboard 111 is coupled to the keyboard controller 106, the serial external device 112 is coupled to the serial interface controller 107, the parallel external device 113 is coupled to the parallel interface controller 108, and the display 114 is coupled to the display controller 109. It should be understood that the block diagram of the architecture depicted in FIG. 1 is for purposes of illustration only and is not intended to limit the scope of the present invention. In some cases, certain devices may be added or subtracted as the case may be.
As will be appreciated by one skilled in the art, embodiments of the present invention may be embodied as a system, method or computer program product. Accordingly, the present disclosure may be embodied in the form of: the term "computer readable medium" as used herein refers to any medium that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. Furthermore, in some embodiments, the invention may also be embodied in the form of a computer program product in one or more computer-readable media having computer-readable program code embodied in the medium.
Any combination of one or more computer-readable media may be employed. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive example) of the computer readable storage medium may include, for example: an electrical connection having one or more wires, a portable computer diskette, 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 foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
Embodiments of the present invention will be described below with reference to flowchart illustrations of methods and block diagrams of apparatuses (or systems) of embodiments of the invention. 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 may be provided to a processor of a general purpose computer, special purpose computer, 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, create means for implementing the functions/acts specified in the flowchart and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable medium that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable medium produce an article of manufacture including instruction means which implement the function/act specified in the flowchart and/or block diagram block or blocks.
The computer program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other devices to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide processes for implementing the functions/acts specified in the flowchart and/or block diagram block or blocks.
According to the embodiment of the invention, a method for displaying keywords in a webpage and a related product thereof are provided.
Furthermore, the number of any elements in the drawings is intended to be illustrative and not restrictive, and any nomenclature is used for distinction only and not for any restrictive meaning.
The principles and spirit of the present invention are explained in detail below with reference to several representative embodiments of the invention.
Summary of The Invention
The inventor finds that the highlighting effect on the keywords in the related art is not ideal. In particular, highlighting a keyword typically modifies the web page of the search area and causes a change in the DOM structure of the search area. In some scenarios, DOM structure changes can cause side effects that can interfere with other services. For example, some actions (e.g., "clicks") may be bound by some tags in the search area of the web page, and a change in the DOM structure may cause the bound action to be lost, thereby affecting the related business of the action.
For this reason, the inventors have studied to find that most browsers can support Range and Selection, and search results of keywords in the related art may contain information required to create Range, and the keywords may be highlighted using Range and Selection. This approach supports only one Range for most browsers, although it is also possible to leave the DOM structure of the search area unmodified. Therefore, most browsers cannot highlight keywords at multiple positions at the same time, and can only highlight one keyword.
Based on this, the inventor finds that a search result of a keyword can be used to overlay a special layer (namely, a highlight layer) in a search area to highlight the keyword, so that a mainstream browser can support highlight display of the keyword without modifying a DOM structure of the search area. In particular, multiple highlighted keywords can be simultaneously generated.
Having described the general principles of the invention, various non-limiting embodiments of the invention are described in detail below.
Exemplary method
A method for exposing keywords in a web page according to an exemplary embodiment of the present invention will be described with reference to fig. 2. It should be noted that the embodiments of the present invention can be applied to any applicable scenarios.
FIG. 2 schematically illustrates a flow diagram of a method 200 for exposing keywords in a web page, according to one embodiment of the invention. As shown in fig. 2, at step S201, in response to a presentation requirement for a keyword in a web page, a search result about the keyword may be acquired. In some embodiments, the aforementioned presentation requirement may be a presentation requirement for one keyword, and may also be a presentation requirement for multiple keywords. In some implementation scenarios, the presentation requirement may be specifically determined according to a keyword or keywords entered by a user through manual, voice, or other means. The detailed description of the display requirement is only an exemplary description, and the solution of the present invention is not limited thereto, and may be specifically adjusted according to the interactive design of the web page. Regarding keyword search results, it may include search results for one or more keywords. The number of search results per keyword is not limited herein, and may be one or more, for example.
Next, at step S202, a highlight layer about the keywords may be drawn in the web page according to the aforementioned search result to complete the presentation of one or more of the keywords. The search result of the keyword may contain information (e.g., location information, etc.) required for drawing a highlight layer, and the highlight layer drawn by using the search result is an additionally constructed keyword display layer, which does not interfere with the DOM structure. Therefore, the keywords are displayed through the highlight layer, the DOM structure of the search area can not be changed, and the side effect caused by the change of the DOM structure is effectively avoided. Meanwhile, when the keywords are displayed by the highlight layer, the number of the keywords is not limited, and the multiple keywords can be displayed simultaneously according to the search result, so that different display requirements of the user are met.
FIG. 3 schematically illustrates a flow diagram of a method 300 for exposing keywords in a web page, according to another embodiment of the invention. It is to be understood that the method 300 may be a refinement and further supplement to the steps of the method 200 of fig. 2. Therefore, the detailed description above in connection with fig. 2 applies equally below.
As shown in fig. 3, at step S301, in response to a requirement for displaying keywords in a web page, search results regarding the keywords may be obtained. For the above display requirement and the search result, reference may be made to the foregoing description in conjunction with the relevant details in fig. 2, which is not repeated herein. In addition, in some embodiments, the aforementioned search result may include a search result for a keyword obtained in units of search units. And the search result of each search unit may include a keyword and position information of the keyword in a document object model tree (e.g., DOM tree) of a hypertext Markup Language (HTML) document of a web page. The aforementioned search unit may be understood as semantically related to the text content in the web page. In some embodiments, the text content of a web page may be divided into search units, with each search unit containing a semantically complete text content. Thus, by means of the search unit, accurate search for keywords in the web page can be achieved on the browser side.
The process of obtaining search results is described in detail below with reference to fig. 4 and 5.
In the present invention, a semantically complete piece of content in a web page can be referred to as a search unit. Thus, even if the keywords are located in different labels, the keywords can be divided into one search unit according to semantic completeness. In some embodiments, the text content in the web page may be divided into one or more search units according to the completeness of the semantics, so as to implement the keyword search conforming to the semantics on the text content of the web page by means of the search units. It should be noted that the detailed description of the division search unit is only an exemplary description, and the scheme of the present invention is not limited thereto.
In some embodiments, a search unit related to text content in a web page may be used as a unit, and a keyword search process may be performed on the search unit to obtain a search result of a keyword, so as to implement an accurate search for the keyword in the web page on the browser side. Meanwhile, the whole search processing process searches in units of search units without being limited to the number and the positions of keywords (such as whether the keywords cross tags or not), so that the keyword content cross tags can be supported while ensuring that the keyword search results conform to semantics.
In some embodiments, one or more keyword searches may be conducted within one search unit. In the searching process, the searching is generally carried out by taking a searching unit as a unit, and the searching is not carried out after the contents of a plurality of searching units are combined. For example, there is the following section of HTML: "day sunshine and breeze and rare good sun light stays half a day in the park". If the entire div is used as a unit to search for the "sunlight" keyword, it may happen that "sun" in "goodlike sun" and "light" in "light stays half a day in the park" are spliced together to result in matching "sunlight". If each "p" tag is used as a search unit, the search result is more semantic-compliant. Therefore, in order to search a piece of web page content according to the semantic meaning, the piece of web page content needs to be divided into a plurality of search units.
In some embodiments, the search unit may be determined using a document object model tree of the HTML document. In particular, a document object model tree of an HTML document of a web page may be traversed to obtain text nodes. Then, a search unit is determined from the aforementioned text node. The aforementioned obtaining of the text node may specifically involve extracting text nodes having the same nearest ancestor block-level element, the same block-level depth, and consecutive neighbors from the document object model tree, or extracting text nodes under an element at a unique block level and without neighboring nodes from the document object model tree.
In some embodiments, the aforementioned document object model tree comprises a DOM tree, which may be referred to as a DOM tree, and DOM nodes may be obtained by parsing an HTML document of a web page (e.g., using a browser). The DOM tree may include multiple types of nodes, such as Element nodes (Element nodes), Text nodes (Text nodes), Comment nodes (Comment nodes), and Document nodes (Document nodes). Wherein element nodes can be generally divided into block-level elements and inline elements. Specifically, in traversing the dom tree, whether an element node associated with a text node in the dom tree is a block-level element or an inline element may be determined according to a tag name (tagName) of the element and display style attribute information (e.g., an attribute value of the cascading style sheet CSS or other attribute values that affect the display effect of the element).
The aforementioned Block-level Depth (Block Depth) of a text node may be understood as the number of Block-level elements that pass from the root node of the dom tree to the text node. The aforementioned ancestor block-level elements are understood to be all the block-level elements through which the node passes. The aforementioned successive neighboring text nodes may be understood as being directly associated with the text node under the same nearest ancestor block-level element and indirectly associated with the text node under the same nearest ancestor block-level element via an inline element.
It should be noted that a text Node does not necessarily have text content or the text content is an empty character string, so that a text Node having text content is an effective text Node, and the effective text Node may also be referred to as a search Node (Searchable Node). In some embodiments, a set of search nodes that simultaneously satisfy the following conditions may be abstracted as a search unit: 1. the nearest ancestor block-level elements are the same; 2. the block-level depths are equal; 3. after ignoring the intra-row elements, they can be considered to be contiguous neighbors in the DOM tree structure. It should be noted that, if there is only one search node in the group of search nodes, it can also be regarded as meeting the requirement; if there are multiple search nodes in the set of search nodes, they must be contiguous and adjacent to each other to be considered satisfactory. The above is further explained below with reference to fig. 4.
FIG. 4 is a DOM tree parsed from an HTML code document. Wherein, the solid line in fig. 4 represents the direct node relationship, and the dotted line represents the node relationship after ignoring the in-line element; "div", "h 1", "p", and "h 3" represent block-level elements, and "div" represents a root node; "span" and "em" represent inline elements; the characters in the drawings, such as "diary", "weather", "today", "…", and "watt", represent text nodes (also referred to as search nodes).
As shown in fig. 4, a "diary" alone under the block-level element "h 1" and without neighboring nodes can be abstracted as a search unit. The "diary" cannot be abstracted as a search unit with the subsequent text nodes "weather" and "good" because the "diary" is under the block-level element "h 1", and the "weather" and "good" are under the block-level element "p", the nearest ancestor block-level elements are not the same. And "weather" and "good" are both under the block-level element "p", the block-level depth is equal (both 2), and are adjacent, and can be abstracted as a search unit.
"today", "me", "remove one", "pass", "Imperial palace" are all under the block level element "div", the block level depth is equal (both 1), and is continuous and adjacent, can be abstracted as a search unit. However, these text nodes cannot be abstracted into a search unit together with the subsequent text nodes "red", "wall", "yellow", and "watt", because there is a block-level element "h 3" between "the home palace" and "red", and "the home palace" and "red" are not adjacent.
In addition, "Imperial palace beauty" is solely under the block-level element "h 3" and there are no neighboring nodes, which can be abstracted as a search unit. The block-level elements "div", red "," wall "," yellow ", and" watt "are all at the same depth (1) and are consecutive and adjacent, and can be abstracted as a search unit.
In order to facilitate understanding of the present invention, the search node and the search unit will be described below using a data structure. In particular, the search node may be described in terms of a text node and a block-level depth blockDepth of the text node. Wherein, the node is a text node type, and the blockDepth is an integer type. And the search Unit (Translation Unit) can be described by adopting the following structure:
1. nodes: representing an array type, wherein each item in the array is a text node (namely a search node); a search unit contains all the text nodes in the array.
2. textFromNodes represents the type of character string and the text content generated by the array nodes. Specifically, each text node under the array nodes may be traversed to obtain the text content of the node, and then the textContent of each node is appended to the textfromsodes one by one. In some embodiments, when the text content of the text node is obtained, a textContent attribute, a nodeValue attribute, or other attributes or methods capable of obtaining the text node content may be used, and the method is not limited herein.
3. searchResultList represents an array type that contains search results returned from searching for one or more keywords. Wherein, each item in the array is a search result (SearchResult), which has the following contents:
keyword: text type, representing a search keyword. It should be noted that, in the present invention, a keyword refers to a continuous non-blank character. For example, "sunshine", "breeze", etc. can be used as a keyword. Also for example, "sunshine breeze" cannot be used as a keyword because there is a blank character between "sunshine" and "breeze". For another example, "sunshine breeze" can only be used as one keyword, and not as two keywords, because "sunshine" and "breeze" are consecutive.
startIndexInText: indicating the starting position of the search key in textfromsodes.
Endindexintext: indicating the end position of the search key in textfromsodes.
Startnode: a text node representing the start of a search key match.
Startindex: indicating the starting position of the search key in the text content of startNode.
vi. endnode: a text node representing the end of the search key match.
Endindex: indicating the end position of the search key in the text content of the endNode.
The division of the search unit may include various ways, and fig. 5 is a diagram showing one possible way of obtaining the search unit. As shown in fig. 5, in the actual application process, at step S501, an empty array searchabunit list may be created. The searchablelitutlist may be used to store search units extracted from the web page. Then, the node root node of the dom node specified in the webpage can be determined, and the type of the root node can be judged.
Next, at step S502, if the root node is determined to be a block-level element (with a block-level depth of 1), its children nodes may be traversed. In particular, it may involve calculating its own block-level depth (which may be in particular +1 on the basis of the block-level depth of the parent node), creating a data searchabenode list for storing the search nodes, and traversing the child nodes. In some embodiments, the searchableneditlist may be scanned from left to right if the child node is a block-level element. If the searchableneolist is empty, indicating that there are no search nodes to be processed, step S502 may be repeatedly performed. And if the searchableNodeList is not empty, representing the search node to be processed. At this time, search nodes that are adjacent and have the same depth at the block level may be created as one search unit (specifically, only values of nodes and textfromsodes of the search unit need to be assigned), and then the created search unit is pushed to the array searchabunit list (where several search units may be created using searchableNodeList). The processed search node is then removed from the searchabloeList, and the foregoing operations are repeated until all search nodes in the searchabloList are processed (at which time the searchabloList is empty). Finally, the process returns to step S502.
In some embodiments, step S503 may be performed if the child node of the block-level element is an intra-row element; if the child node of the block-level element is another type of node (e.g., a comment node, etc.) or no child node is present, no processing may be performed.
Next, at step S503, if it is determined that itself is an in-line element (whose block-level depth is 0), its children nodes may be traversed. In particular, it may involve computing its own block-level depth (which is the parent node's block-level depth), traversing the child nodes, and processing each child node. In some embodiments, if the child nodes of the intra-row elements are block-level elements, step S502 may be performed; if the child node is an inline element, go to step S503; if the child node is a text node, step S504 may be executed; if the child node is other type node or no child node, no processing is needed.
Next, at step S504, if it is determined that the search node is a text node, a search node may be created according to the text node. In some embodiments, if the search node creation is successful, the search node may be pushed into the searchabenolistcreated in the nearest ancestor block-level element. If the self text node has no content or the content is empty characters, the search node cannot be created, and no processing is needed at this time. If the child node is other type node or no child node, no processing is needed. It should be noted that, the description of the acquisition process of the search unit is only an exemplary description, and the scheme of the present invention is not limited thereto.
In the obtained search unit, search processing may be performed on a plurality of keywords. There are many ways in which the search process for keywords may be performed, and fig. 6 is a diagram showing one possible way in which the keyword search process may be performed on a search unit to obtain a search result. The number of keywords to be searched may be only one or more, and each keyword may be subjected to the search process according to fig. 6. As shown in fig. 6, in step S601, there are items in the array searchablelitutlist of the storage search unit, and a search for a keyword can be performed on each item searchablelitutlist of the searchabunit in turn. If no item exists in the array searchablelutitlist of the storage search unit, the search processing of the keyword is ended.
Next, at step S602, it may be determined whether a keyword is found. Specifically, the keyword may be looked up using textfromsodes in each searchablelunit. For example, string. let the index be textfrornodes. If so (e.g., the index > -1), step S603 may be performed. If not (e.g., the index is-1), step S608 is executed, and the search for the keyword may be directly ended. It should be noted that the detailed description of the keyword searching method is exemplified here, and the scheme of the present invention is not limited thereto.
Next, at step S603, start position information startIndexInText of the keyword in textfromsodes may be acquired, and at step S604, end position information endinextext of the keyword in textfromsodes may be acquired. In some embodiments, the end position information endinexext may be calculated from the start position information startindenexext and the length of the keyword. For example, endIndexInText + keyword. It should be noted that the description of the acquisition process of the end position information is only an exemplary description.
Next, at step S605, a search result searchResult may be created from startIndexInText and endIndexInText. Wherein each search result may include a keyword and position information of the keyword in the document object model tree. In some embodiments, a search result for a keyword may be obtained by using a text-to-node mapping algorithm from a starting position of the keyword in the text content of the search unit, and a next search result may be determined by using the aforementioned text-to-node mapping algorithm from an ending position of the search result in the text content of the search unit until the search unit is searched.
It should be noted that, in the present invention, the method of calculating startNode, startIndex, endNode, and endIndex according to startInInText, nodes, and endInText is called text-to-node mapping calculation. Specifically, startNode and startIndex can be calculated from startIndexInText and nodes. For example, it is possible to traverse the text nodes in the array nodes starting from 0 and calculate the sum of the lengths sum of the text contents of the text nodes (where sum may have an initial value of 0). Then, when traversing to the ith text node nodes [ i ], sum ═ L0+ L1+ L2+. + Li-1 (where L0/L1/L2/Li-1 respectively represents the text content length of the 0/1/2/i-1 text node). At this time, if startIndexInText is not less than sum and startInText is not less than sum + Li, it can be determined that startNode is the ith text node [ i ], and startInText-sum.
endNode and endIndex can also be calculated from endInText and nodes. For example, it is possible to traverse the text nodes in the array nodes starting from 0 and calculate the sum of the lengths sum of the text contents of the text nodes (where sum may be 0 as an initial value). Then, when traversing to the ith text node nodes [ i ], sum ═ L0+ L1+ L2+. + Li-1 (where L0/L1/L2/Li-1 respectively represents the text content length of the 0/1/2/i-1 text node). At this time, if endinexext is not less than sum and endinexext is not less than sum + Li, it may be determined that endNode is the ith text node [ i ], and endlnext is endinexitext-sum. The search result searchrresult can be created by adding the keyword, startInText and endInText to the startNode, startInInText, endNode and endInInText obtained by the calculation.
Next, at step S606, the search result searchResult may be pushed into the searchResultList array of the searchablelunit. Then, at step S607, the search for the keyword may continue starting from the endinexitext position of the textfromsodes. For example, if the index is found (e.g., the index > -1), steps S603 to S607 may be repeated. If the keyword cannot be found (e.g., the index ═ 1), step S608 is executed, and the search for the keyword may be directly ended.
The various steps described in fig. 6 are further illustrated below in conjunction with specific examples:
assume that there is a segment of HTML: today, the em style is 2em bright and beautiful, the breeze is gentle and the sunshine is particularly comfortable. Then its searchablelit includes: nodes, including text nodes "today" "," "yang" "," "bright and beautiful", gentle breeze and comfortable sunning ""; textFromNodes: the value is the character string "today sunshine bright, breeze gentle, sunshine very comfortable".
Assuming that the search keyword is "sunlight", the process of the keyword includes: the "sunlight" can be searched from the position where the "sunlight" is last searched for (no end position, i.e., 0 at this time) in textfromsodes. For example, let the index be textfromsnodes. indexof ("sun", 0). The value calculated for the index is now 2, i.e. the position of "positive" in "sunny today. Then, the value of the index may be given to startIndexInText (at which time the value of startInText is 2), and the value of endInText may be calculated. For example, endIndexInText ═ startIndexInText + "sunlight". length, then the value of endIndexInText is 4.
Next, startNode and startIndex can be calculated from nodes, startInInText (value 2). Specifically, when i is equal to 1, the sum value is 2(sum L0, L0 is the string length of "today"), which satisfies the condition startIndexInText ≧ sum. And sum + L1 has a value of 3(3 ═ sum + L1 ═ 2+1, and L1 is the string length of "yang"), which satisfies the startindextextextext < sum + Li condition. Therefore, startNode is a text node "yang", and startIndex is 0 (0: startindextextextext-sum: 2-2).
Next, endNode and endIndex can be calculated from nodes, endInText (value 4). Specifically, when i is 2, the sum value is 3(sum L0+ L1, L0 being the string length of "today", L1 being the string length of "sun"), which satisfies the condition endIndexInText ≧ sum. The sum + L2 has a value of 20(20 + sum + L2-3 +17, L2 is the length of the string for "photopic, fair, sunny, and particularly comfortable" which satisfies the endinexextextext < sum + Li condition. Therefore, endNode is the text node "bright light, breeze, and sunshine is particularly comfortable", and startIndex is 1 (1: endInText-sum: 4-3).
Then, a search result can be created according to the startNode, startIndex, endNode, and endIndex obtained by calculation, and pushed into the searchresultList array. Then, the search for "sunlight" is continued from the end position of the last search for "sunlight", i.e., endIndexInText (value 4). Indexof ("sunlight", endinexextext). At this time, the index is 12, and it can be calculated that startInText is 12, endInText is 14, startNode is text node "photopic, breeze, gentle sunning", startInText value is 9, endNode is text node "photopic, breeze, gentle sunning", and endix value is 11. And continuously creating a search result according to the calculated startNode, startIndex, endNode and endIndex, and pushing the search result into the searCHResultList array. And starts to search for "sunlight" from the end position of the last search for "sunlight" (i.e., endIndexInText value is 14). Indexof ("sunlight", endinexextext). At this time, the index is-1, which means that it is not found, and the search for "sunlight" is terminated.
After the search result of the keyword is acquired at step S301, return to fig. 3 is made. Next, at step S302, the search result in the aforementioned search unit may be traversed to obtain the position and the placeholder information of the keyword in the two-dimensional coordinate system of the web page. In some embodiments, the aforementioned two-dimensional coordinate system may include various two-dimensional coordinate systems (e.g., Offset, Client, Page, and Screen, etc.) defined in a CSS Object Model (CSSOM). The reference point of the Offset coordinate is the nearest parent element with CSS positioning (whose position attribute is absolute/relative) in the parent, and if CSS positioning is not performed in the parent element of the current element, it is body. The reference point for the Client coordinates is the upper left corner of the browser viewport (viewport). The reference point for the Page coordinates is the upper left corner of the entire Page. And the reference point for the Screen coordinates is the upper left corner of the user display Screen.
In some embodiments, the description is specifically given by taking the Client coordinate system as an example. In general, the location and placeholders for web content may be described using rectangles in a coordinate system. For example, a DOMRect object can be utilized to describe the location and placeholder information of the HTML element as a whole in the Client coordinate system. Specifically, the HTML element has a getBoundingClientRect () API, which can be called to obtain a DOMRect object. And the DOMRect object has x, y, left, right, top, bottom, width, height and other attributes enough to describe the position and occupation information of an HTML element or other webpage contents. It should be noted that the detailed description of the two-dimensional coordinate system and the domect object is only an exemplary description, and the present invention is not limited thereto. For example, the HTML element also has an API named getClientRects () that can return a set of DOMRects that describe the location and placeholder information of the HTML element's internal content in the Client coordinate system.
In some embodiments, similar to HTML elements, a Range object also has a getBoundIngClientRect () API and a getClientRects () API, which can be used to describe the position and placeholder information of Range and its contents in the Client coordinate system. Specifically, a Range object may be created for each search result in the aforementioned search unit. In some implementation scenarios, the location information of the keyword in the document object model tree may include a start text node (startNode), an end text node (endNode), a start location (startIndex) in the text content of the start text node, and an end location (endIndex) in the text content of the end text node, which are matched by the keyword.
Creating the Range object may include creating a Range of the Range object, determining a starting position of a starting text node matched by the keyword or a starting position in the text content of the starting text node as a starting position of the Range object, and determining an ending position of an ending text node matched by the keyword or an ending position in the text content of the ending text node as an ending position of the Range object.
In some embodiments, after the creation of the Range object is completed, a coordinate information list of all contents under the Range object Range may be acquired using the coordinate acquisition interface. For example, a coordinate information list (e.g., a domect list) of all contents under the Range object Range may be acquired using a getbeamingclientrect () API or a getclientreturns () API. And then, mounting the result on a searchrresult object in a clientRects attribute mode so as to acquire the position and the placeholder information of the keyword in a two-dimensional coordinate system of the webpage. It should be noted that, here, the location and the position-occupying information of the keyword in the two-dimensional coordinate system of the web page are only described in a Range manner as an example, and it may also be implemented in other manners, and the solution of the present invention is not limited thereto.
After the position and the occupancy information of the keyword in the two-dimensional coordinate system of the web page are acquired, then at step S303, a highlight layer may be drawn according to the acquired position and occupancy information of the keyword in the two-dimensional coordinate system. In some embodiments, a highlight layer at least covering the search area of the web page may be specifically drawn, and the highlight layer is adjusted according to the position of the keyword in the two-dimensional coordinate system and the position-occupying information, so that the keyword below the highlight layer is displayed based on the adjusted highlight layer. It should be noted that the description of the rendering process of the highlight layer is only an exemplary description, and the scheme of the present invention is not limited thereto.
In some embodiments, a highlight container and container elements may be created for the highlight layer, and the highlight layer may be overlaid at least over the search area by adjusting the properties of the highlight container and/or container elements. The range covered by the highlight layer can be adjusted according to the actual application requirements, and for example, the highlight layer may only cover the search area, or cover a part of the web page, or cover the whole web page, and the like.
In practical applications, the highlight layer can be adjusted in various ways. In some embodiments, a highlight element can be added to the highlight container according to the position of the keyword in the two-dimensional coordinate system and the position occupation information, so that the highlight element and the keyword are fused and displayed simultaneously. In particular, a highlight element may be created and added to a higher level container. Then, according to the position and the occupancy information of the keyword in the two-dimensional coordinate system, the position and the occupancy information of the highlight element in the highlight container are determined, so that the highlight element is displayed in the highlight container and covers the corresponding keyword. Then, a highlight display style can be added to the highlight element according to the display requirement. The properties of the highlight element may then be adjusted to fuse the highlight element with the keywords it covers.
For example, in some implementation scenarios, container DOM elements (e.g., div elements or other suitable DOM elements) of the highlight layer may be created using document. The container elements may then be set to absolute (absolute) or fixed positions. The highlight container can then be resized (e.g., width, height) and positioned (e.g., left, top) to cover the entire viewport (viewport) or entire page (page) or search area. The size of the coverage area may be adjusted according to the specific service. If necessary, the CSS attribute pointer-events of the highlight layer can be set to none so as to ensure that the highlight layer does not influence the normal interaction of the search area.
Next, highlight elements may be added in the highlight container. In particular, each item searchabunit of the searchabunit list is traversed. Each entry searchResult of the searchResultList in the searchrunit is traversed. Traversing each clientRect of clientRects in the searchrresult, and processing each clientRect as follows:
(1) create element of highlight can be created using document. For example, a highlight element such as a div element may be created and appended to the higher level container.
(2) The highlight element may be set to absolute (absolute) positioning.
(3) The width and height of the highlight element can be set according to the width and height attributes in the clientRect.
(4) The position information of the highlight element in the highlight container can be calculated according to the top and left attributes in the clientRect, and the highlight element is displayed in the highlight container by using the top and left attributes of the CSS, so that the highlight element at least covers right above the keyword of the search result.
(5) Highlight colors may be added to the highlight elements. For example, the background color (background-color) of the highlight element may be set to yellow (yellow) or other colors.
(6) The transparency of the highlight element (e.g., css opacity) may be adjusted so that the highlight element and the search result keywords are merged together so that the user can see both the search result keywords and the highlight element at the same time. In particular, the highlighted elements above different keywords may be set to different colors, whereby different keywords may be presented simultaneously by different colors. The display effect is as shown in fig. 7A, and the keywords "sunlight" and "breeze" can be displayed at the same time. Wherein, the positions of the "sunshine" and the "breeze" are different in display color through shade color.
In other embodiments, the container elements are filled with translucent or opaque colors, and the filled colors of the container elements at corresponding positions in the highlight layer can be cleared according to the positions of the keywords in the two-dimensional coordinate system and the position occupation information, so as to display the keywords below the highlight layer.
In some implementation scenarios, a container DOM element (e.g., canvas element) of the highlight layer may be created using the document createlement () API or other API, and the container element may be appended to the document body or other suitable location. The canvas element may then be set to absolute (absolute) or fixed. Then, the size (e.g., width, height) and position (e.g., left, top) of the high canvas element may be adjusted to cover the entire viewport (viewport) or the entire page (page) or the search area. The size of the coverage area may be adjusted according to a specific service. If necessary, the highlight layer container element CSS z-index attribute can also be used to ensure that the highlight layer does not affect the normal interaction of the search area.
Then, the filled color can be cleared in the highlight container canvas element according to the position and occupancy information of the keyword in the two-dimensional coordinate system. In particular, each item searchabunit of the searchabunit list is traversed. Each entry searchResult of the searchResultList in the searchrunit is traversed. Traversing each clientRect of clientRects in the searchrresult, and processing each clientRect as follows:
the canvas endinderingContext () API or other APIs can be used to clear the color fill of the corresponding position of the clientRect by utilizing the top, left, width and height attributes of the clientRect. At this point, the search result keywords below the highlight layer are visible. The display effect is shown in fig. 7B, and the keywords "sunlight" and "breeze" can be displayed at the same time. Wherein the container elements are indicated by shading to be filled with translucent or opaque colors. When the color filled is cleared, the "sun" and "breeze" beneath it can be seen.
In still other embodiments, the container element at the corresponding position in the highlight layer may be color-filled according to the position of the keyword in the two-dimensional coordinate system and the placeholder information, so as to simultaneously display the filled color and the keyword therebelow.
In some implementation scenarios, a container DOM element (e.g., canvas element) of the highlight layer may be created using the document. The canvas element may then be set to absolute (absolute) or fixed. Then, the size (e.g., width, height) and position (e.g., left, top) of the high canvas element may be adjusted to cover the entire viewport (viewport) or the entire page (page) or the search area. The size of the coverage area may be adjusted according to the specific service. Then, cs mix-blend-mode of the canvas element may be set to overlay. If necessary, the highlight layer container element CSS z-index attribute can also be used to ensure that the highlight layer does not affect the normal interaction of the search area.
The color filled in the canvas element may then be based on the location of the keyword in the two-dimensional coordinate system and the occupancy information. Specifically, each item searchrit of the searchablelnitlist is traversed. Each entry searchResult of the searchResultList in the searchrunit is traversed. Traversing each clientRect of clientRects in the searchrresult, and processing each clientRect as follows:
the position corresponding to the clientRect can be filled with the color by using the CanvasRenderingContext2D.fillRect () API or other APIs by utilizing the top, left, width and height attributes of the clientRect. At this point, the search result keywords below the highlight layer are visible due to the canvas element css mix-blend-mode. In particular, container elements above different keywords may be filled with different colors, whereby different keywords may be presented simultaneously by different colors. The display effect is as shown in fig. 7C, and the keywords "sunlight" and "breeze" can be displayed at the same time. Wherein, the positions of "sunshine" and "breeze" represent different display colors by shading color.
Based on the method and the device, the keyword can be displayed on the premise of not changing the DOM structure of the search area, so that side effects (such as the condition of interfering other services, such as loss of bound actions) caused by the change of the DOM structure can be effectively avoided. Meanwhile, when the keywords are displayed by utilizing the highlight layer, the number of the keywords is not limited, and the multiple keywords can be displayed simultaneously according to the search result, so that different display requirements of the user can be met. In addition, the scheme of the invention does not cause content rearrangement and redrawing of the search area. When the search keyword changes, the highlight layer is redrawn according to the search result only by searching again, and the method has better performance and optimized space.
Exemplary device
Having described the method of the exemplary embodiment of the present invention, next, a description will be given of related products for presenting keywords in a web page of the exemplary embodiment of the present invention with reference to fig. 8.
Fig. 8 schematically shows a schematic block diagram of an apparatus 800 according to an embodiment of the present invention. As shown in fig. 8, device 800 may include a processor 801 and a memory 802. Wherein the memory 802 stores computer instructions for exposing keywords in a web page, which when executed by the processor 801, cause the apparatus 800 to perform the method according to the above description in conjunction with fig. 2 and fig. 2, 3, 5 and 6. For example, in some embodiments, device 800 may perform retrieval of search results for keywords, rendering of highlight layers, and so forth. Based on the method, the device 800 can realize simultaneous presentation of a plurality of keywords on the premise of not changing the DOM structure of the search area on the browser side
In some implementations, the device 800 may include a terminal device (e.g., a personal PC, a computer, a cell phone, a learning aid, other devices capable of supporting web browsing, etc.).
It should be noted that although in the above detailed description several means or sub-means of the device for text searching of web pages are mentioned, this division is only not mandatory. Indeed, the features and functions of two or more of the devices described above may be embodied in one device, according to embodiments of the invention. Conversely, the features and functions of one apparatus described above may be further divided into embodiments by a plurality of apparatuses.
Moreover, while the operations of the method of the invention are depicted in the drawings in a particular order, this does not require or imply that the operations must be performed in this particular order, or that all of the illustrated operations must be performed, to achieve desirable results. Rather, the steps depicted in the flowcharts may change the order of execution. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step execution, and/or one step broken down into multiple step executions.
Use of the verbs "comprise", "comprise" and their conjugations in this application does not exclude the presence of elements or steps other than those stated in this application. The article "a" or "an" preceding an element does not exclude the presence of a plurality of such elements.
While the spirit and principles of the invention have been described with reference to several particular embodiments, it is to be understood that the invention is not limited to the disclosed embodiments, nor is the division of aspects, which is for convenience only as the features in such aspects may not be combined to benefit. The invention is intended to cover various modifications and equivalent arrangements included within the spirit and scope of the appended claims. The scope of the following claims is to be accorded the broadest interpretation so as to encompass all such modifications and equivalent structures and functions.
Claims (10)
1. A method for displaying keywords in a webpage, comprising:
responding to the display requirement of the keywords in the webpage, and acquiring the search result of the keywords; and
and drawing a highlight layer related to the keywords in the webpage according to the search result so as to finish displaying one or more keywords.
2. The method according to claim 1, wherein the search result comprises a search result for a keyword obtained in units of search units, and the search result for each search unit comprises a keyword and position information of the keyword in a document object model tree of an HTML document of the web page.
3. The method of claim 2, wherein drawing a highlight layer about the keyword in the web page according to the search result comprises:
traversing the search result in the search unit to acquire the position and the position occupation information of the keyword in the two-dimensional coordinate system of the webpage; and
and drawing the highlight layer according to the position and the occupation information of the acquired keywords in the two-dimensional coordinate system.
4. The method of claim 3, wherein obtaining the location and placeholder information of the keyword in the two-dimensional coordinate system of the web page comprises:
creating a Range object for each search result in the search unit; and
and acquiring a coordinate information list of all contents in the Range object Range by using a coordinate acquisition interface so as to acquire the position and the occupation information of the keyword in the two-dimensional coordinate system of the webpage.
5. The method according to claim 3 or 4, wherein the step of drawing the highlight layer according to the position and occupancy information of the acquired keyword in the two-dimensional coordinate system comprises:
drawing a highlight layer at least covering the search area of the webpage, wherein the search area contains the keywords; and
and adjusting the highlight layer according to the position of the keyword in the two-dimensional coordinate system and the occupation information, so as to display the keyword positioned below the highlight layer based on the adjusted highlight layer.
6. The method of claim 5, wherein adjusting the highlight layer to display the keywords below the highlight layer based on the adjusted highlight layer comprises:
and adding a highlight element into the highlight container according to the position and the occupancy information of the keyword in the two-dimensional coordinate system, so that the highlight element and the keyword are fused and displayed simultaneously.
7. The method of claim 5, wherein the container elements are filled with translucent or opaque colors, and wherein adjusting the highlight layer to display keywords below the highlight layer based on the adjusted highlight layer comprises:
and according to the position and the occupation information of the keyword in the two-dimensional coordinate system, removing the color filled by the container element at the corresponding position in the highlight layer so as to display the keyword below the highlight layer.
8. The method of claim 5, wherein adjusting the highlight layer to display keywords located below the highlight layer based on the adjusted highlight layer comprises:
and according to the position and the occupation information of the keyword in the two-dimensional coordinate system, performing color filling on the container element at the corresponding position in the highlight layer so as to simultaneously display the filled color and the keyword below the color.
9. An apparatus, comprising:
a processor; and
memory storing computer instructions for exposing keywords in a web page, which when executed by the processor, cause the apparatus to perform the method of any of claims 1-8.
10. A computer readable storage medium containing program instructions for exposing keywords in a web page, which when executed by a processor, cause the method according to any one of claims 1-8 to be carried out.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210345463.6A CN114741632A (en) | 2022-03-31 | 2022-03-31 | Method for displaying keywords in webpage and related product thereof |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210345463.6A CN114741632A (en) | 2022-03-31 | 2022-03-31 | Method for displaying keywords in webpage and related product thereof |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114741632A true CN114741632A (en) | 2022-07-12 |
Family
ID=82280396
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210345463.6A Pending CN114741632A (en) | 2022-03-31 | 2022-03-31 | Method for displaying keywords in webpage and related product thereof |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114741632A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116643831A (en) * | 2023-07-27 | 2023-08-25 | 城云科技（中国）有限公司 | Optimization method and device for Canvas drawing overlapped characters and application of optimization method and device |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2008122202A1 (en) * | 2007-04-04 | 2008-10-16 | The Hong Kong University Of Science And Technology | Custom rendering of webpages on mobile devices |
| US7562287B1 (en) * | 2005-08-17 | 2009-07-14 | Clipmarks Llc | System, method and apparatus for selecting, displaying, managing, tracking and transferring access to content of web pages and other sources |
| US20140310588A1 (en) * | 2013-04-10 | 2014-10-16 | International Business Machines Corporation | Managing a display of results of a keyword search on a web page |
| IN2014DE00964A (en) * | 2014-04-02 | 2015-10-09 | Samsung Electronics Co Ltd | |
| US20160162140A1 (en) * | 2014-08-05 | 2016-06-09 | Moxie Software, Inc. | Element mapping and rule building systems and methods for contextual site visitor engagement |
| US20160283592A1 (en) * | 2013-11-08 | 2016-09-29 | Beijing Qihoo Technology Company Limited | Method for performing network search at a browser side and a browser |
| CN112445693A (en) * | 2019-08-28 | 2021-03-05 | 腾讯科技（深圳）有限公司 | Page update detection method, device, equipment and storage medium |
| CN112685553A (en) * | 2019-10-18 | 2021-04-20 | 小船出海教育科技（北京）有限公司 | Method, device, equipment and medium for searching and replacing online document |
| CN113050808A (en) * | 2021-04-22 | 2021-06-29 | 北京百度网讯科技有限公司 | Method and device for highlighting target text in input box |
| CN113868568A (en) * | 2021-09-28 | 2021-12-31 | 深圳云之家网络有限公司 | Webpage keyword highlighting method, device, equipment and storage medium |
-
2022
- 2022-03-31 CN CN202210345463.6A patent/CN114741632A/en active Pending
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7562287B1 (en) * | 2005-08-17 | 2009-07-14 | Clipmarks Llc | System, method and apparatus for selecting, displaying, managing, tracking and transferring access to content of web pages and other sources |
| WO2008122202A1 (en) * | 2007-04-04 | 2008-10-16 | The Hong Kong University Of Science And Technology | Custom rendering of webpages on mobile devices |
| US20140310588A1 (en) * | 2013-04-10 | 2014-10-16 | International Business Machines Corporation | Managing a display of results of a keyword search on a web page |
| US20160283592A1 (en) * | 2013-11-08 | 2016-09-29 | Beijing Qihoo Technology Company Limited | Method for performing network search at a browser side and a browser |
| IN2014DE00964A (en) * | 2014-04-02 | 2015-10-09 | Samsung Electronics Co Ltd | |
| US20160162140A1 (en) * | 2014-08-05 | 2016-06-09 | Moxie Software, Inc. | Element mapping and rule building systems and methods for contextual site visitor engagement |
| CN112445693A (en) * | 2019-08-28 | 2021-03-05 | 腾讯科技（深圳）有限公司 | Page update detection method, device, equipment and storage medium |
| CN112685553A (en) * | 2019-10-18 | 2021-04-20 | 小船出海教育科技（北京）有限公司 | Method, device, equipment and medium for searching and replacing online document |
| CN113050808A (en) * | 2021-04-22 | 2021-06-29 | 北京百度网讯科技有限公司 | Method and device for highlighting target text in input box |
| CN113868568A (en) * | 2021-09-28 | 2021-12-31 | 深圳云之家网络有限公司 | Webpage keyword highlighting method, device, equipment and storage medium |
Non-Patent Citations (1)
| Title |
|---|
| HOARFROSTER: "你不会不知道最新的CSS API可以给选中的文本添加样本吧？", pages 1 - 9, Retrieved from the Internet <URL:《https://zhuanlan.zhihu.com/p/488081702?utm_id=0》> * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116643831A (en) * | 2023-07-27 | 2023-08-25 | 城云科技（中国）有限公司 | Optimization method and device for Canvas drawing overlapped characters and application of optimization method and device |
| CN116643831B (en) * | 2023-07-27 | 2023-10-13 | 城云科技（中国）有限公司 | Optimization method and device for Canvas drawing overlapped characters and application of optimization method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP7354294B2 (en) | System and method for providing responsive editing and display integrating hierarchical fluid components and dynamic layout | |
| Ahmadi et al. | Efficient web browsing on small screens | |
| US10185782B2 (en) | Mode identification for selective document content presentation | |
| JP4814575B2 (en) | System and method for displaying content on a small screen computing device | |
| JP4248411B2 (en) | Method, system, computer program and storage device for displaying a document | |
| JP4805336B2 (en) | Capturing unpaged hypertext in paginated documents | |
| CN103473338B (en) | Webpage content extraction method and webpage content extraction system | |
| US20080033996A1 (en) | Techniques for approximating the visual layout of a web page and determining the portion of the page containing the significant content | |
| US20080301545A1 (en) | Method and system for the intelligent adaption of web content for mobile and handheld access | |
| CN102065114A (en) | Method and device for mobile terminal to access webpage | |
| US20130339840A1 (en) | System and method for logical chunking and restructuring websites | |
| CA2817554A1 (en) | Mobile content management system | |
| WO2009011837A1 (en) | Extraction and reapplication of design information to existing websites | |
| Ahmadi et al. | User-centric adaptation of Web information for small screens | |
| CN103365877B (en) | Method and server to establishing catalogue after webpage progress transcoding | |
| CN106886547A (en) | A kind of scenario generation method and device | |
| US20220114269A1 (en) | Page processing method, electronic apparatus and non-transitory computer-readable storage medium | |
| CN110309386B (en) | Method and device for crawling web page | |
| CN109683978A (en) | A kind of method, apparatus and electronic equipment of the rendering of streaming layout interface | |
| US10331800B2 (en) | Search results modulator | |
| CN114741632A (en) | Method for displaying keywords in webpage and related product thereof | |
| CN114021042A (en) | Webpage content extraction method and device, computer equipment and storage medium | |
| US10198408B1 (en) | System and method for converting and importing web site content | |
| CN115268904A (en) | User interface design file generation method, device, equipment and medium | |
| CN114218515B (en) | Web digital object extraction method and system based on content segmentation |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |