用于对网页中关键字进行展示的方法及其相关产品与流程

1.本发明的实施方式涉及互联网技术领域，更具体地，本发明的实施方式涉及用于对网页中关键字进行展示的方法、用于执行前述方法的设备和计算机可读存储介质。


背景技术：

2.本部分旨在为权利要求书中陈述的本发明的实施方式提供背景或上下文。此处的描述可包括可以探究的概念，但不一定是之前已经想到或者已经探究的概念。因此，除非在此指出，否则在本部分中描述的内容对于本技术的说明书和权利要求书而言不是现有技术，并且并不因为包括在本部分中就承认是现有技术。
3.为了快速帮助用户找到web网页上的内容，网站一般会提供搜索功能，并以高亮的方式展示搜索关键字。通常，对关键字的高亮处理会涉及到对搜索区域的网页进行修改，并进而导致搜索区域的dom结构发生变化。在有些场景下，修改搜索区域而导致dom结构变化会产生一些副作用。例如，网页的搜索区域内有部分标签可能会绑定一些动作(例如“点击”)，dom结构发生改变可能会引起绑定动作的丢失，后续不得不重新绑定这些动作，从而导致整个关键字展示的实现过程非常繁琐。


技术实现要素：

4.已知的对网页中关键字的展示过程繁琐且展示效果不理想，这是非常令人烦恼的过程。
5.为此，非常需要一种改进的用于对网页中关键字进行展示的方法及其相关产品，无需修改搜索区域的dom结构，可根据关键字的搜索结果所绘制的高亮层来实现对关键字的展示。
6.在本上下文中，本发明的实施方式期望提供一种用于对网页中关键字进行展示的方法及其相关产品。
7.在本发明实施方式的第一方面中，提供了一种用于对网页中关键字进行展示的方法，包括：响应于对所述网页中关键字的展示需求，获取关于所述关键字的搜索结果；以及根据所述搜索结果在所述网页中绘制关于所述关键字的高亮层，以完成对一个或多个所述关键字的展示。
8.在本发明的一个实施例中，其中所述搜索结果包括以搜索单元为单位获得的对关键字的搜索结果，每个所述搜索单元的搜索结果包括关键字和关键字在所述网页的html文档的文档对象模型树中的位置信息。
9.在本发明的另一个实施例中，根据所述搜索结果在所述网页中绘制关于所述关键字的高亮层包括：遍历所述搜索单元中的搜索结果，以获取所述关键字在所述网页的二维坐标系中的位置和占位信息；以及根据获取到的关键字在所述二维坐标系中的位置和占位信息绘制所述高亮层。
10.在本发明的又一个实施例中，获取所述关键字在所述网页的二维坐标系中的位置
和占位信息包括：创建关于所述搜索单元中每个搜索结果的范围range对象；以及利用坐标获取接口获取range对象范围下的所有内容的坐标信息列表，以实现对所述关键字在所述网页的二维坐标系中的位置和占位信息的获取。
11.在本发明的再一个实施例中，其中所述关键字在所述文档对象模型树中的位置信息包括所述关键字所匹配的开始文本节点、结束文本节点、在所述开始文本节点的文本内容中的起始位置和在所述结束文本节点的文本内容中的结束位置，创建关于所述搜索单元中每个搜索结果的范围range对象包括：创建range对象的范围；确定所述关键字所匹配的开始本文节点或在所述开始文本节点的文本内容中的起始位置为所述rang对象的起始位置；以及确定所述关键字所匹配的结束本文节点或在所述结束文本节点的文本内容中的结束位置为所述rang对象的结束位置。
12.在本发明的一个实施例中，根据获取到的关键字在所述二维坐标系中的位置和占位信息绘制所述高亮层包括：绘制至少覆盖在所述网页的搜索区域上方的高亮层，其中所述搜索区域包含有所述关键字；以及根据所述关键字在所述二维坐标系中的位置和占位信息，对所述高亮层进行调整，以基于调整后的高亮层对位于所述高亮层下方的关键字进行显示。
13.在本发明的另一个实施例中，绘制至少覆盖在所述网页的搜索区域上方的高亮层包括：创建关于所述高亮层的高亮容器及容器元素；以及对所述高亮容器和/或所述容器元素的属性进行调整，以使所述高亮层至少覆盖在所述搜索区域上方。
14.在本发明的在一个实施例中，对所述高亮层进行调整，以基于调整后的高亮层对位于所述高亮层下方的关键字进行显示包括：根据所述关键字在所述二维坐标系中的位置和占位信息，在所述高亮容器中添加高亮元素，以使所述高亮元素和所述关键字相融合、且同时显示。
15.在本发明的另一个实施例中，在所述高亮容器中添加高亮元素包括：创建所述高亮元素且将其添加至所述高层容器中；根据所述关键字在所述二维坐标系中的位置和占位信息，确定所述高亮元素在所述高亮容器中的位置和占位信息，以使所述高亮元素展示在所述高亮容器中、且覆盖在对应的关键字的上方；根据所述展示需求为所述高亮元素添加高亮展示样式；以及调整所述高亮元素的属性，以使所述高亮元素与其所覆盖的关键字相融合。
16.在本发明的又一个实施例中，其中所述容器元素填充有半透明或不透明的颜色，对所述高亮层进行调整，以基于调整后的高亮层对位于所述高亮层下方的关键字进行显示包括：根据所述关键字在所述二维坐标系中的位置和占位信息，清除所述高亮层中相应位置处的容器元素所填充的颜色，以显示所述高亮层下方的关键字。
17.在本发明的再一个实施例中，对所述高亮层进行调整，以基于调整后的高亮层对位于所述高亮层下方的关键字进行显示包括：根据所述关键字在所述二维坐标系中的位置和占位信息，对所述高亮层中相应位置处的容器元素进行颜色填充，以同时显示所填充的颜色和其下方的关键字。
18.在本发明实施方式的第二方面中，提供了一种设备，包括：处理器；以及存储器，其存储有用于对网页中关键字进行展示的计算机指令，当所述计算机指令由所述处理器运行时，使得所述设备执行根据前文以及下文多个实施例所述的方法。
19.在本发明实施方式的第三方面中，提供了一种计算机可读存储介质，包含用于对网页中关键字进行展示的程序指令，当所述程序指令由处理器执行时，使得所述设备执行根据前文以及下文多个实施例所述的方法。
20.根据本发明实施方式的用于对网页中关键字进行展示的方法及其相关产品，可以利用网页中关键字的搜索结果来绘制高亮层，以基于所绘制的高亮层来实现对关键字的展示。由此，可以在不改变搜索区域dom结构的前提下实现对关键字的展示，从而有效避免dom结构改变带来的副作用(例如导致所绑定的动作丢失等干扰其他业务的情况)。同时利用高亮层展示关键字时，对关键字的数量并无限制，可具体依据搜索结果来实现多个关键字的同时展示，从而满足用户的不同展示需求。在本发明的一些实施例中，可以依据与网页文本内容语义相关的搜索单元来获取搜索结果，可确保对关键字搜索的全面性以及精准性。
21.另外，在本发明的另一些实施例中，在调整高亮层过程中，可以通过对高亮元素的展示式样或填充颜色的调整，实现以不同颜色同时展示不同关键字。
22.此外，当所搜索的关键字发生变化时，只需要根据变化后的关键字的搜索结果重新绘制高亮层即可，使得本发明的方案具有更好的性能和优化空间。
附图说明
23.通过参考附图阅读下文的详细描述，本发明示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本发明的若干实施方式，其中：
24.图1示意性地示出了适于实现本发明实施方式的示例性计算系统100的框图；
25.图2示意性地示出了根据本发明一个实施例的用于对网页中关键字进行展示的方法流程图；
26.图3示意性地示出了根据本发明另一个实施例的用于对网页中关键字进行展示的方法示意图；
27.图4示意性地示出了根据本发明实施例的遍历文档对象模型树的方法流程图；
28.图5示意性地示出了根据本发明实施例的获取搜索单元的方法流程图；
29.图6示意性地示出了根据本发明实施例的获取搜索结果的方法流程图；
30.图7a示意性地示出了根据本发明一个实施例的高亮绘制效果；
31.图7b示意性地示出了根据本发明另一个实施例的高亮绘制效果；
32.图7c示意性地示出了根据本发明又一个实施例的高亮绘制效果；
33.图8示意性地示出了根据本发明实施例的设备的示意框图。
34.在附图中，相同或对应的标号表示相同或对应的部分。
具体实施方式
35.下面将参考若干示例性实施方式来描述本发明的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本发明，而并非以任何方式限制本发明的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。
36.图1示出了适于实现本发明实施方式的示例性计算系统100的框图。如图1所示，计
算系统100可以包括：中央处理单元(cpu)101、随机存取存储器(ram)102、只读存储器(rom)103、系统总线104、硬盘控制器105、键盘控制器106、串行接口控制器107、并行接口控制器108、显示控制器109、硬盘110、键盘111、串行外部设备112、并行外部设备113和显示器114。这些设备中，与系统总线104耦合的有cpu 101、ram 102、rom 103、硬盘控制器105、键盘控制器106、串行控制器107、并行控制器108和显示控制器109。硬盘110与硬盘控制器105耦合，键盘111与键盘控制器106耦合，串行外部设备112与串行接口控制器107耦合，并行外部设备113与并行接口控制器108耦合，以及显示器114与显示控制器109耦合。应当理解，图1所述的结构框图仅仅是为了示例的目的，而不是对本发明范围的限制。在某些情况下，可以根据具体情况增加或减少某些设备。
37.本领域技术技术人员知道，本发明的实施方式可以实现为一种系统、方法或计算机程序产品。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式，本文一般称为“电路”、“模块”“单元”或“系统”。此外，在一些实施例中，本发明还可以实现为在一个或多个计算机可读介质中的计算机程序产品的形式，该计算机可读介质中包含计算机可读的程序代码。
38.可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是，但不限于，电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举示例)例如可以包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
39.计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。
40.计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、电线、光缆、rf等等，或者上述的任意合适的组合。
41.可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如java、smalltalk、c ，还包括常规的过程式程序设计语言—诸如“c”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络(包括局域网(lan)或广域网(wan))连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
42.下面将参照本发明实施例的方法的流程图和设备(或系统)的框图描述本发明的实施方式。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合
都可以由计算机程序指令实现。这些计算机程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，这些计算机程序指令通过计算机或其它可编程数据处理装置执行，产生了实现流程图和/或框图中的方框中规定的功能/操作的装置。
43.也可以把这些计算机程序指令存储在能使得计算机或其它可编程数据处理装置以特定方式工作的计算机可读介质中，这样，存储在计算机可读介质中的指令就产生出一个包括实现流程图和/或框图中的方框中规定的功能/操作的指令装置的产品。
44.也可以把计算机程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机或其它可编程装置上执行的指令能够提供实现流程图和/或框图中的方框中规定的功能/操作的过程。
45.根据本发明的实施方式，提出了一种用于对网页中关键字进行展示的方法及其相关产品。
46.此外，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。
47.下面参考本发明的若干代表性实施方式，详细阐释本发明的原理和精神。
48.发明概述
49.本发明人发现，相关技术中对关键字的高亮展示效果不理想。具体地，通常高亮关键字会对搜索区域的网页进行修改，并导致搜索区域的dom结构发生变化。在一些场景下，dom结构变化会产生一些副作用，进而干扰到其他业务。例如，网页的搜索区域内有部分标签可能会绑定一些动作(例如“点击”)，dom结构发生改变可能会引起绑定动作的丢失，从而影响该动作的相关业务。
50.为此，发明人经过研究发现大部分浏览器能够支持range和selection，而相关技术中关键字的搜索结果可以包含创建range所需要的信息，可以使用range和selection来高亮关键字。这种方式虽然也可以不用修改搜索区域dom结构，但大部分浏览器仅支持一个range。由此，大部分浏览器不能同时多处高亮关键字，只能高亮一处关键字。
51.基于此，发明人发现可以利用关键字的搜索结果在搜索区域覆盖特殊的一层(也即高亮层)以高亮关键字，由此实现让主流浏览器在不修改搜索区域的dom结构的情况下，支持对关键字的高亮展示。特别是，都能同时多处高亮关键字。
52.在介绍了本发明的基本原理之后，下面具体介绍本发明的各种非限制性实施方式。
53.示例性方法
54.下面参考图2来描述根据本发明示例性实施方式的用于对网页中关键字进行展示的方法。需要注意的是，本发明的实施方式可以应用于适用的任何场景。
55.图2示意性地示出了根据本发明一个实施例的用于对网页中关键字进行展示的方法200流程图。如图2所示，在步骤s201处，响应于对网页中关键字的展示需求，可以获取关于关键字的搜索结果。在一些实施例中，前述的展示需求可以针对一个关键字的展示需求，还可以是针对多个关键字的展示需求。在一些实施场景中，具体可以根据用户通过手动、语音或者其他方式所输入的一个关键字或多个关键来确定该展示需求。这里对展示需求的细
节性描述仅是示例性说明，本发明的方案并不受此限制，具体可以根据网页的交互设计来调整。关于关键字的搜索结果，其可以包括一个或多个关键字的搜索结果。其中每个关键字的搜索结果的数量这里并不进行限制，例如可以是一个或多个。
56.接着，在步骤s202处，可以根据前述的搜索结果在网页中绘制关于关键字的高亮层，以完成对一个或多个所述关键字的展示。前述的关键字的搜索结果可以包含绘制高亮层所需的信息(例如位置信息等)，利用搜索结果所绘制的高亮层是额外构建的关键字展示层，其不会对dom结构产生干扰。由此，通过高亮层来展示关键字，可以不改变搜索区域dom结构，从而有效避免dom结构改变带来的副作用。同时利用高亮层展示关键字时，对关键字的数量并无限制，可具体依据搜索结果来实现多个关键字的同时展示，从而满足用户的不同展示需求。
57.图3示意性地示出了根据本发明另一个实施例的用于对网页中关键字进行展示的方法300流程图。可以理解的是，方法300可以是对图2中方法200中各个步骤的细化和进一步补充。因此，前文结合图2的细节性描述同样适用于下文。
58.如图3所示，在步骤s301处，响应于对网页中关键字的展示需求，可以获取关于前述关键字的搜索结果。关于前述的展示需求、搜索结果可以参考前文结合图2中相关细节性描述，这里不再进行赘述。另外，在一些实施例中，前述的搜索结果可以包括以搜索单元为单位获得的对关键字的搜索结果。而每个搜索单元的搜索结果可以包括关键字和关键字在网页的超文本标记语言(hyper text markup language，html)文档的文档对象模型树(例如dom树)中的位置信息。前述的搜索单元可以理解为与网页中文本内容语义相关。在一些实施例中，网页的文本内容可以被划分成若干搜索单元，而每个搜索单元均包含一语义完整的文本内容。由此，通过借助该搜索单元可在浏览器侧实现对网页中关键字的精准搜索。
59.以下结合图4和图5对搜索结果的获取过程进行详细说明。
60.在本发明中，网页中语义完整的一段内容可以被称为一个搜索单元。由此，即便是位于不同标签中关键字，根据语义完整性也可以将其划分至一个搜索单元中。在一些实施例中，可以根据语义的完整性将网页中文本内容划分成一个或多个搜索单元，以借助搜索单元实现对网页文本内容进行符合语义的关键字搜索。需要说明的是，这里对划分搜索单元的细节性描述仅是示例性说明，本发明的方案并不受此限制。
61.在一些实施例中，可以利用与网页中文本内容相关的搜索单元为单位，对搜索单元进行关键字搜索处理以得到关键字的搜索结果，从而在浏览器侧实现对网页中关键字的精准搜索。同时整个搜索处理过程以搜索单元为单元进行搜索，而不局限于关键字的数量和位置(例如是否跨标签)，使得在确保关键字搜索结果符合语义的同时，能够支持关键字内容跨标签。
62.在一些实施例中，可以在一个搜索单元内进行一个或多个关键字搜索。在搜索过程中通常以搜索单元为单位进行，而不将多个搜索单元的内容合并后搜索。例如，有如下一段html：「《div》《p》今天阳光明媚，清风微拂，难得的好太阳《/p》《p》光在公园就呆了半天《/p》《/div》」。若将整个「div」作为一个单元，搜索「阳光」关键字，则可能会出现「难得好太阳」中的「阳」与「光在公园就呆了半天」中的「光」拼接在一起导致匹配「阳光」的情况。若将每一个「p」标签作为一个搜索单元，得到搜索结果更符合语义。由此，因此，为了对一段网页内容进行符合语义的搜索，需要先将该段网页内容划分为若干个搜索单元。
63.在一些实施例中，可以利用html文档的文档对象模型树来确定搜索单元。具体地，可以对网页的html文档的文档对象模型树进行遍历，以得到文本节点。然后，根据前述的文本节点来确定搜索单元。其中，前述的对文本节点的获取具体可以涉及从文档对象模型树中提取具有同一最近祖先块级元素、相同块级深度以及连续相邻的文本节点，或者从文档对象模型树中提取独处一块级元素下且无相邻节点的文本节点。
64.在一些实施例中，前述的文档对象模型树包括dom树，可以通过对网页的html文档进行解析(例如利用浏览器来解析)来获取dom节点，而dom节点也被称为dom树。dom树可以包括多种类型的节点，例如元素节点(element node)、文本节点(text node)、注释节点(comment node)和文档节点(document node)。其中，元素节点一般可以分为块级元素和行内元素。具体地，可以在遍历dom树过程中，根据元素的标签名(tagname)和显示样式属性信息(例如层叠样式表css的属性值或其他影响元素显示效果的属性值等)来确定dom树中文本节点所关联的元素节点是块级元素还是行内元素。
65.前述的文本节点的块级深度(block depth)可以理解为从dom树的根节点到达该文本节点所经过的块级元素的数量。前述的祖先块级元素可以理解为是该节点所经过的所有块级元素。前述的连续相邻的文本节点可以理解为直接关联于同一最近祖先块级元素下的文本节点以及经由行内元素间接关联于同一最近祖先块级元素下的文本节点。
66.需要说明的是，文本节点未必有文字内容或者文字内容为空字符串，因此一个有文本内容的文本节点才是有效文本节点，而有效的文本节点也可以称为搜索节点(searchable node)。在一些实施例中，同时满足以下条件的一组搜索节点可以被抽象为一搜索单元：1.最近的祖先块级元素是同一个；2.块级深度相等；3.忽略行内元素后，在dom树结构中可被视为连续相邻。需要说明的是，若该组搜索节点中仅有一个搜索节点，也可被视为符合要求；若该组搜索节点中有多个搜索节点，则必须连续且相邻，才能被视为符合要求。以下结合图4对上述内容进一步说明。
67.图4是根据一段html代码文档所解析成的dom树。其中，图4中的实线表示直接的节点关系，虚线表示忽略行内元素后的节点关系；「div」、「h1」、「p」以及「h3」表示块级元素，且「div」表示根节点；「span」和「em」表示行内元素；图中文字如「日记」、「天气」、「今天」、
…
、「瓦」表示文本节点(也可以称为搜索节点)。
68.如图4所示，「日记」单独在块级元素「h1」下且无相邻的节点，可被抽象为一个搜索单元。「日记」不能与后续的文本节点「天气」、「不错」一起被抽象为一个搜索单元，因为「日记」在块级元素「h1」下，而「天气」、「不错」在块级元素「p」下，最近的祖先块级元素不是同一个。而「天气」和「不错」都在块级元素「p」下，块级深度相等(都为2)，且是相邻的，可被抽象为一个搜索单元。
69.「今天」、「我」、「去了一」、「趟」、「故宫」都在块级元素「div」下，块级深度相等(均为1)，且是连续相邻的，可被抽象为一个搜索单元。但这些文本节点不能与后续的文本节点「红」、「墙」、「黄」、「瓦」一起被抽象为一个搜索单元，因为「故宫」和「红」中间有块级元素「h3」相隔，「故宫」和「红」不是相邻的。
70.另外，「故宫很美」单独在块级元素「h3」下，且无相邻的节点，其可被抽象为一个搜索单元。而「红」、「墙」、「黄」、「瓦」都在块级元素「div」下，块级深度相等(均为1)，且是连续相邻的，可被抽象为一个搜索单元。
71.为了更便于理解本发明方案，以下将采用数据结构来描述搜索节点和搜索单元。具体地，搜索节点可以用文本节点node和文本节点的块级深度blockdepth来描述。其中，node为文本节点类型，blockdepth为整数类型。而搜索单元(translation unit)可以采用以下结构来描述：
72.1、nodes：表示数组类型，数组中的每一项为一文本节点(即搜索节点)；一个搜索单元包含数组内的所有文本节点。
73.2、textfromnodes:表示字符串类型，由数组nodes生成的文本内容。具体地，可以遍历数组nodes下的每一个文本节点以获取节点的文本内容，然后将每一个节点的textcontent逐一追加到textfromnodes。在一些实施例中，获取文本节点的文本内容时，可以使用textcontent属性、nodevalue属性或其他能获取文本节点内容的属性或方法，这里并不对此进行限制。
74.3、searchresultlist:表示数组类型，其包含搜索一个或多个关键字返回的搜索结果。其中，数组中的每个项目即是搜索结果(searchresult)，其有以下内容：
75.i.keyword：文本类型，表示一个搜索关键字。需要说明的是，在本发明中，关键字特指一段连续的非空白的字符。例如，「阳光」、「清风」等都可分别作为一个关键字。又例如，「阳光清风」不能作为一个关键字，因为「阳光」和「清风」之间有空白字符。再例如，「阳光清风」只能作为一个关键字，不能作为两个关键字，因为「阳光」和「清风」是连续的。
76.ii.startindexintext：表示搜索关键字在textfromnodes中的起始位置。
77.iii.endindexintext：表示搜索关键字在textfromnodes的结束位置。
78.iv.startnode：表示搜索关键字匹配的开始的文本节点。
79.v.startindex：表示搜索关键字在startnode的文本内容中的起始位置。
80.vi.endnode：表示搜索关键字匹配的结束的文本节点。
81.vii.endindex：表示搜索关键字在endnode的文本内容中的结束位置。
82.搜索单元的划分可以包括多种方式，而图5是示出了一种获取搜索单元的可行方式。如图5所示，实际应用过程中，在步骤s501处，可以创建空数组searchableunitlist。该searchableunitlist可以用于存储从网页中提取的搜索单元。然后，可以将网页中指定的dom节点根节点，并判断根节点的类型。
83.接着，在步骤s502处，若确定根节点为块级元素(其块级深度为1)，可以遍历其子节点。具体地，可以涉及计算自身的块级深度(具体可以在父节点的块级深度的基础上 1)、创建一个用于存储搜索节点的数据searchablenodelist以及遍历子节点。在一些实施例中，若子节点为块级元素，可以从左到右扫描searchablenodelist。若searchablenodelist为空，表示无待处理的搜索节点，可以重复执行步骤s502。若searchablenodelist不为空，则表示有待处理的搜索节点。此时可以将相邻且块级深度相等的搜索节点创建成一个搜索单元(具体仅需要对搜索单元的nodes、textfromnodes进行赋值)，然后将创建好的搜索单元push到数组searchableunitlist(其中使用searchablenodelist可以创建若干个搜索单元)。接着将已处理的搜索节点从searchablenodelist中移除，重复前述操作直至searchablenodelist中的所有搜索节点被处理完(此时searchablenodelist为空)。最后，返回执行步骤s502。
84.在一些实施例中，若块级元素的子节点为行内元素可以执行步骤s503；若块级元
素的子节点为其他类型节点(例如注释节点等)或者无子节点可以不做处理。
85.接着，在步骤s503处，若确定自身为行内元素(其块级深度为0)，可以遍历其子节点。具体地，可以涉及计算自身的块级深度(为父节点的块级深度)、遍历子节点并处理每一个子节点。在一些实施例中，若行内元素的子节点为块级元素，可以执行步骤s502；若子节点为行内元素，仍执行步骤s503；若子节点为文本节点，可以执行步骤s504；若子节点为其他类型节点或无子节点可以不做处理。
86.接着，在步骤s504处，若确定自身为文本节点，可以根据文本节点创建搜索节点。在一些实施例中，若搜索节点创建成功，可以将搜索节点push进入最近的祖先块级元素中创建的searchablenodelist。若自身文本节点无内容或者内容为空字符等情况，无法创建搜索节点，此时可以不做处理。若子节点为其他类型节点或无子节点可以不做处理。需要说明的是，这里对搜索单元的获取过程描述仅是示例性说明，本发明的方案并不受此限制。
87.可以在上述获取到的搜索单元中，对若干关键字进行搜索处理。对关键字的搜索处理可以有多种方式，而图6是示出了一种对搜索单元进行关键字搜索处理以得到搜索结果的可行方式。其中待搜索的关键字可以仅为一个或者多个，每个关键字均可以按照图6进行搜索处理。如图6所示，在步骤s601处，存储搜索单元的数组searchableunitlist中有项目，可以依次对searchableunitlist每个项目searchableunit进行关键字keyword进行搜索查找。若存储搜索单元的数组searchableunitlist中无项目，结束对关键字keyword的搜索处理。
88.接着，在步骤s602处，可以判断是否查找到关键字keyword。具体地，可以使用每个searchableunit中的textfromnodes对关键字keyword进行查找。例如，可以使用string.prototype.indexof api查找：let theindex＝textfromnodes.indexof(keyword,0)。若能(例如theindex＞-1)，可以执行步骤s603。若不能(例如theindex＝-1)，则执行步骤s608，可以直接结束对关键字keyword的搜索。需要说明的是这里对关键字查找方式的细节性描述进行示例性说明，本发明的方案并不受此限制。
89.接着，在步骤s603处，可以获取关键字keyword在textfromnodes中的开始位置信息startindexintext，以及在步骤s604处，可以获取keyword在textfromnodes中的结束位置信息endindexintext。在一些实施例中，结束位置信息endindexintext可以根据开始位置信息startindexintext和keyword的长度进行计算得到。例如，endindexintext＝startindexintext keyword.length。需要说明的是，这里对结束位置信息的获取过程的描述仅是示例性说明。
90.接着，在步骤s605处，可以根据startindexintext和endindexintext创建搜索结果searchresult。其中，每一搜索结果可以包括关键字和关键字在文档对象模型树中的位置信息。在一些实施例中，可以从关键字在搜索单元的文本内容中的开始位置处，利用文本到节点映射算法得到该关键字的一搜索结果，并从该搜索结果在搜索单元的文本内容中的结束位置处，继续利用前述的文本到节点映射算法确定下一搜索结果，直至搜索完搜索单元。
91.需要说明的是，在本发明中，根据startindexintext、nodes、endindexintext计算startnode、startindex、endnode、endindex的方法被称为文本到节点映射计算。具体地，可以根据startindexintext和nodes计算startnode和startindex。例如，可以从0开始遍历数
组nodes中的文本节点,并计算文本节点的文本内容的长度之和sum(其中sum的初始值可以为0)。然后，遍历到第i个文本节点nodes[i]时，sum＝l0 l1 l2 ... li-1(其中l0/l1/l2/li-1分别表示第0/1/2/i-1个文本节点的文本内容长度)。此时，若startindexintext≥sum且startindexintext≤sum li，可以确定startnode为第i个文本节点node[i]，startindex＝startindexintext
–
sum。
[0092]
还可以根据endindexintext和nodes计算endnode和endindex。例如，可以从0开始遍历数组nodes中的文本节点,并计算文本节点的文本内容的长度之和sum(其中sum的初始值可以为0)。然后，遍历到第i个文本节点nodes[i]时，sum＝l0 l1 l2 ... li-1(其中l0/l1/l2/li-1分别表示第0/1/2/i-1个文本节点的文本内容长度)。此时，若endindexintext≥sum且endindexintext≤sum li，可以确定endnode为第i个文本节点node[i]，endindex＝endindexintext
–
sum。由以上计算得到的startnode、startindex、endnode、endindex加上keyword、startindexintext、endindexintext，即可创建搜索结果searchresult。
[0093]
接着，在步骤s606处，可以将搜索结果searchresult推入searchableunit的searchresultlist数组中。然后，在步骤s607处，可以从textfromnodes的endindexintext位置开始继续对keyword进行搜索查找。例如，theindex＝textfromnodes.indexof(keyword,endindexintext)，若能找到(例如theindex＞-1)，则可以重复执行步骤s603～s607。若找不到(例如theindex＝-1)，则执行步骤s608，可以直接结束对关键字keyword的搜索。
[0094]
以下结合具体实例对图6所描述的各个步骤进一步说明：
[0095]
假设有一段html：《p》今天《em style＝"font-size:2em"》阳《/em》光明媚，清风微拂，阳光晒得特别舒服《/p》。那么其searchableunit包括：nodes:包含文本节点「今天」、「阳」、「光明媚，清风微拂，阳光晒得特别舒服」；textfromnodes：值为字符串“今天阳光明媚，清风微拂，阳光晒得特别舒服”。
[0096]
假设搜索关键字为「阳光」，该关键字的过程包括：可以从textfromnodes上一次搜索「阳光」结束的位置(此时无结束位置，即0)搜索「阳光」。例如，let theindex＝textfromnodes.indexof(“阳光”,0)。此时theindex计算得到的值为2，也即「今天阳光明媚...」中「阳」的位置(位置从0开始)。接着，可以将theindex的值赋给startindexintext(此时startindexintext的值为2)，并计算endindexintext的值。例如，endindexintext＝startindexintext “阳光”.length,那么endindexintext的值为4。
[0097]
接着，可以根据nodes、startindexintext(值为2)计算startnode和startindex。具体地，当i等于1时，sum值为2(sum＝l0,l0即“今天”的字符串长度)，其满足startindexintext≥sum的条件。而sum l1的值为3(3＝sum l1＝2 1，l1即为“阳”的字符串长度)，其满足startindexintext《sum li条件。因此，startnode为文本节点「阳」，startindex为0(0＝startindexintext-sum＝2-2)。
[0098]
接着，可以根据nodes、endindexintext(值为4)计算endnode和endindex。具体地，当i＝2时，sum值为3(sum＝l0 l1,l0即“今天”的字符串长度,l1即“阳”的字符串长度),其满足endindexintext≥sum的条件。而sum l2的值为20(20＝sum l2＝3 17,l2即为“光明媚，清风微拂，阳光晒得特别舒服”的字符串长度)，其满足endindexintext《sum li条件。因此，endnode为文本节点「光明媚，清风微拂，阳光晒得特别舒服」，startindex为1(1＝
endindexintext-sum＝4-3)。
[0099]
接着，可以根据计算得到的startnode、startindex、endnode、endindex创建一个搜索结果，并推入searchresultlist数组中。然后，从上次搜索「阳光」的结束位置——即endindexintext(值为4)处开始继续搜索「阳光」。其中，theindex＝textfromnodes.indexof(“阳光”，endindexintext)。此时theindex为12，并可计算出startindexintext为12，endindexintext为14，startnode为文本节点「光明媚，清风微拂，阳光晒得特别舒服」，startindex值为9，endnode为文本节点「光明媚，清风微拂，阳光晒得特别舒服」，以及endindex值为11。继续根据计算得到的startnode、startindex,endnode、endindex创建一个搜索结果，并推入searchresultlist数组中。并从上次搜索「阳光」的结束位置(即endindexintext值为14)处开始搜索「阳光」。其中，theindex＝textfromnodes.indexof(“阳光”，endindexintext)。此时theindex为-1，表示未找到，结束搜索「阳光」。
[0100]
在步骤s301处获取到关键字的搜索结果之后，返回图3。接着，在步骤s302处，可以遍历前述搜索单元中的搜索结果，以获取关键字在网页的二维坐标系中的位置和占位信息。在一些实施例中，前述的二维坐标系可以包括在css对象模型(css object model，cssom)中定义的各种二维坐标系(例如offset、client、page以及screen等)。其中，offset坐标的参考点是父级中最近的一个带有css定位(其位置属性为absolute/relative)的父元素，如果当前元素的父级元素中没有进行css定位，那么就是body。client坐标的参考点是浏览器视口(viewport)的左上角。page坐标的参考点是整个页面的左上角。而screen坐标的参照点是用户显示器屏幕左上角。
[0101]
在一些实施例中，具体以client坐标系为例进行说明。一般来说，网页内容的位置和占位可以使用处于坐标系中的矩形来描述。例如，可以利用domrect对象来描述html元素整体在client坐标系的位置和占位信息。具体地，html元素有getboundingclientrect()api，可以调用该api获取domrect对象。而domrect对象具有x、y、left、right、top、bottom、width、height等属性，足以描述一个html元素或者其他网页内容的位置和占位信息。需要说明的是，这里对二维坐标系及domrect对象的细节性描述仅是示例性说明，本发明的方案并不受此限制。例如，html元素还有一个名为getclientrects()api，能够返回一组用于描述html元素内部内容在client坐标系的位置和占位信息的domrect。
[0102]
在一些实施例中，与html元素类似，range对象也有getboundingclientrect()api和getclientrects()api，其可以用于描述range及其内容在client坐标系的位置和占位信息。具体地，可以创建关于前述的搜索单元中每个搜索结果的范围range对象。在一些实施场景中，关键字在文档对象模型树中的位置信息可以包括关键字所匹配的开始文本节点(startnode)、结束文本节点(endnode)、在开始文本节点的文本内容中的起始位置(startindex)和在结束文本节点的文本内容中的结束位置(endindex)。
[0103]
其中，创建range对象可以包括创建range对象的范围、确定关键字所匹配的开始本文节点或在开始文本节点的文本内容中的起始位置为rang对象的起始位置、以及确定关键字所匹配的结束本文节点或在结束文本节点的文本内容中的结束位置为rang对象的结束位置。
[0104]
在一些实施例中，在完成range对象的创建之后，可以利用坐标获取接口获取
range对象范围下的所有内容的坐标信息列表。例如，可以利用getboundingclientrect()api或getclientrects()api来获取range对象范围下的所有内容的坐标信息列表(例如domrect列表)。然后，将结果以clientrects属性的形式挂载到searchresult对象上，以实现对关键字在网页的二维坐标系中的位置和占位信息的获取。需要说明的是，这里仅以range方式为例来说明关键字在网页的二维坐标系中的位置和占位信息，其还可以通过其他方式来实现，本发明的方案并不受此限制。
[0105]
在获取到关键字在网页的二维坐标系中的位置和占位信息之后，接着在步骤s303处，可以根据获取到的关键字在二维坐标系中的位置和占位信息绘制高亮层。在一些实施例中，具体可以绘制至少覆盖在网页的搜索区域上方的高亮层，以及根据关键字在二维坐标系中的位置和占位信息对高亮层进行调整，以基于调整后的高亮层对位于高亮层下方的关键字进行显示。需要说明的是，这里对高亮层的绘制过程的描述仅是示例性说明，本发明的方案并不局限于此。
[0106]
在一些实施例中，可以创建关于高亮层的高亮容器及容器元素，可以通过对高亮容器和/或容器元素的属性进行调整，以使高亮层至少覆盖在搜索区域上方。其中，高亮层所覆盖的范围可以根据实际应用需求进行调整，例如可以仅覆盖在搜索区域，或者覆盖部分网页，或者覆盖全部网页等。
[0107]
在实际应用中，可以通过多种方式来调整高亮层。在一些实施例中，可以根据关键字在二维坐标系中的位置和占位信息，在高亮容器中添加高亮元素，以使高亮元素和关键字相融合、且同时显示。具体地，可以创建高亮元素且将其添加至高层容器中。接着，可以根据关键字在二维坐标系中的位置和占位信息，确定高亮元素在高亮容器中的位置和占位信息，以使高亮元素展示在所述高亮容器中、且覆盖在对应的关键字的上方。接着，可以根据展示需求为高亮元素添加高亮展示样式。然后，可以调整高亮元素的属性，以使高亮元素与其所覆盖的关键字相融合。
[0108]
例如，在一些实施场景中，可以使用document.createelement()或其他api创建高亮层的容器dom元素(例如div元素或者其他合适的dom元素)，并可以将容器元素追加到document.body或其他合适的位置。然后，可以设置容器元素成绝对(absolute)定位或者fixed定位。接着，可以调整高亮层容器的大小(例如width,height)和位置(例如left,top)，使其覆盖整个视口(viewport)或整个页面(page)或搜索区域。覆盖范围的大小可以根据具体的业务来调整。若有必要，还可以将高亮层的css属性pointer-events设置为none,以保证高亮层不影响搜索区域的正常交互。
[0109]
接着，可以在高亮层容器中添加高亮元素。具体地，遍历searchableunitlist的每一项searchunit。遍历searchunit中searchresultlist的每一项searchresult。遍历searchresult中的clientrects的每一项clientrect，对每个clientrect进行如下处理：
[0110]
(1)可以使用document.createelement()或其他api创建高亮元素。例如可以创建div元素等高亮元素，并将该元素追加到高层容器。
[0111]
(2)可以设置高亮元素成绝对(absolute)定位。
[0112]
(3)可以根据clientrect中的width、height属性设置高亮元素的宽度和高度。
[0113]
(4)可以根据clientrect中的top、left属性计算高亮元素在高亮容器的位置信息，并使用css的top、left属性将高亮元素展示在高亮容器中，以使高亮元素至少覆盖在搜
索结果关键字的正上方。
[0114]
(5)可以为高亮元素添加高亮颜色。例如，可以将高亮元素的背景色(background-color)设置为黄色(yellow)或其他颜色。
[0115]
(6)可以调整高亮元素的透明度(例如css opacity)，使得高亮元素和搜索结果关键字融合在一起，使得用户能同时看到搜索结果关键字和高亮元素。具体地，不同关键字上方的高亮元素可以设置成不同颜色，由此可以通过不同颜色同时展示不同关键字。其展示效果如图7a所示，可以同时展示关键字“阳光”和“清风”。其中，“阳光”和“清风”处通过阴影颜色深浅来表示展示颜色不同。
[0116]
在另一些实施例中，容器元素填充有半透明或不透明的颜色，可以根据关键字在二维坐标系中的位置和占位信息，清除高亮层中相应位置处的容器元素所填充的颜色，以显示所述高亮层下方的关键字。
[0117]
在一些实施场景中，可以使用document.createelement()api或其他api创建高亮层的容器dom元素(例如canvas元素)，并可以将容器元素追加到document.body或其他合适的位置。然后，可以设置canvas元素成绝对(absolute)定位或者fixed定位。接着，可以调整高canvas元素的大小(例如width,height)和位置(例如left,top)，使其覆盖整个视口(viewport)或整个页面(page)或搜索区域。覆盖范围的大小可以根据具体的业务来调整。若有必要，还可以将高亮层容器元素css z-index属性,以保证高亮层不影响搜索区域的正常交互。
[0118]
接着，可以根据关键字在二维坐标系的位置和占位信息，在高亮层容器canvas元素中清除填充的颜色。具体地，遍历searchableunitlist的每一项searchunit。遍历searchunit中searchresultlist的每一项searchresult。遍历searchresult中的clientrects的每一项clientrect，对每个clientrect进行如下处理：
[0119]
可以利用clientrect的top、left、width、height属性，使用canvasrenderingcontext2d.clearrect()api或其他api将该clientrect对应位置的颜色填充清除。此时，高亮层下方的搜索结果关键字即可被看到。其展示效果如图7b所示，可以同时展示关键字“阳光”和“清风”。其中，通过阴影来表示容器元素填充有半透明或不透明的颜色。当所填充的颜色被清除后，位于其下方的“阳光”和“清风”可以被看到。
[0120]
在又一些实施例中，还可以根据关键字在二维坐标系中的位置和占位信息，对高亮层中相应位置处的容器元素进行颜色填充，以同时显示所填充的颜色和其下方的关键字。
[0121]
在一些实施场景中，可以使用document.createelement()api或其他api创建高亮层的容器dom元素(例如canvas元素)，并可以将容器元素追加到document.body或其他合适的位置。然后，可以设置canvas元素成绝对(absolute)定位或者fixed定位。接着，可以调整高canvas元素的大小(例如width,height)和位置(例如left,top)，使其覆盖整个视口(viewport)或整个页面(page)或搜索区域。覆盖范围的大小可以根据具体的业务来调整。然后，可以将canvas元素的css mix-blend-mode设置为overlay。若有必要，还可以将高亮层容器元素css z-index属性,以保证高亮层不影响搜索区域的正常交互。
[0122]
接着，可以根据关键字在二维坐标系的位置和占位信息，在canvas元素中填充的颜色。具体地，遍历searchableunitlist的每一项searchunit。遍历searchunit中
searchresultlist的每一项searchresult。遍历searchresult中的clientrects的每一项clientrect，对每个clientrect进行如下处理：
[0123]
可以利用clientrect的top、left、width、height属性，使用canvasrenderingcontext2d.fillrect()api或其他api将该clientrect对应的位置填充颜。此时，由于canvas元素css mix-blend-mode的作用，高亮层下方的搜索结果关键字即可被看到。具体地，不同关键字上方的容器元素可以填充不同颜色，由此可以通过不同颜色同时展示不同关键字。其展示效果如图7c所示，可以同时展示关键字“阳光”和“清风”。其中，“阳光”和“清风”处通过阴影颜色深浅来表示展示颜色不同。
[0124]
基于此，本发明的方案可以在不改变搜索区域dom结构的前提下实现对关键字的展示，从而有效避免dom结构改变带来的副作用(例如导致所绑定的动作丢失等干扰其他业务的情况)。同时利用高亮层展示关键字时，对关键字的数量并无限制，可具体依据搜索结果来实现多个关键字的同时展示，从而满足用户的不同展示需求。另外，本发明的方案也不会导致搜索区域的内容重排和重绘。当搜索关键字变化时，只要重新搜索并根据搜索结果重新绘制高亮层即可，具有更好的性能和优化空间。
[0125]
示例性设备
[0126]
在介绍了本发明示例性实施方式的方法之后，接下来，参考图8对本发明示例性实施方式的用于对网页中关键字进行展示的相关产品进行描述。
[0127]
图8示意性地示出了根据本发明实施例的设备800的示意框图。如图8所示，设备800可以包括处理器801和存储器802。其中存储器802存储有用于对网页中关键字进行展示的计算机指令，当所述计算机指令由处理器801运行时，使得设备800执行根据前文结合图2以及图2、图3、图5及图6所描述的方法。例如，在一些实施例中，设备800可以执行对关键字的搜索结果的获取、对高亮层的绘制等。基于此，通过设备800可以在浏览器侧实现了在不改变搜索区域dom结构的前提下对多个关键字的同时展示
[0128]
在一些实施场景中，设备800可以包括终端设备(例如个人pc机、电脑、手机、助学设备以及其他能够支持网页浏览的设备等)。
[0129]
应当注意，尽管在上文详细描述中提及了用于对网页进行文本搜索的设备的若干装置或子装置，但是这种划分仅仅并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多装置的特征和功能可以在一个装置中具体化。反之，上文描述的一个装置的特征和功能可以进一步划分为由多个装置来具体化。
[0130]
此外，尽管在附图中以特定顺序描述了本发明方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。相反，流程图中描绘的步骤可以改变执行顺序。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。
[0131]
申请文件中提及的动词“包括”、“包含”及其词形变化的使用不排除除了申请文件中记载的那些元素或步骤之外的元素或步骤的存在。元素前的冠词“一”或“一个”不排除多个这种元素的存在。
[0132]
虽然已经参考若干具体实施方式描述了本发明的精神和原理，但是应该理解，本发明并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本发明旨在涵盖所附权利要求的精神和
范围内所包括的各种修改和等同布置。所附权利要求的范围符合最宽泛的解释，从而包含所有这样的修改及等同结构和功能。