一种基于Vue的搜索文本高亮显示方法、设备及介质技术

本申请公开了一种基于Vue的搜索文本高亮显示方法、设备及介质，用以解决现有技术中的用户无法准确快速的获取到与搜索文本相关联的信息，查询效率较低，用户体验感较差的问题。方法包括：在预先创建的节点迭代器中获取与用户输入的搜索文本相关联的DOM元素并存储至缓存数组中；遍历缓存数组中的DOM元素确定与搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素的起始索引和终止索引；通过预设的自定义元素注册器创建每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；基于待标记DOM元素对应的起始索引和终止索引将待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。文本的高亮显示。文本的高亮显示。

【技术实现步骤摘要】
一种基于Vue的搜索文本高亮显示方法、设备及介质


[0001]本申请涉及计算机
，尤其涉及一种基于Vue的搜索文本高亮显示方法、设备及介质。

技术介绍

[0002]目前，很多行业产生的数据量不断增加，数据量的快速增长标志着人们已经进入大数据的时代。随着大数据技术的飞速崛起，推动了数据的高效传播，网络系统中产生了海量数据，随之也产生了数据过载的问题。
[0003]用户在网络中查询所需搜索文本，且搜索到的相关文本较长时，用户无法准确定位到每篇相关文档中与搜索文本相匹配的内容，无法通过查看相匹配的内容，确定查询到的相关文档是否为自己所需的，这就导致用户无法方便快速的查看到与所需的搜索文本相关联的关键信息，查询效率较低，用户体验感较差。

技术实现思路

[0004]本申请实施例提供了一种基于Vue的搜索文本高亮显示方法、设备及介质，用以解决现有技术中的用户无法准确快速的获取到与搜索文本相关联的信息，查询效率较低，用户体验感较差的技术问题。
[0005]一方面，本申请实施例提供了一种基于Vue的搜索文本高亮显示方法，包括：
[0006]根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素，并将所述DOM元素存储至缓存数组中；
[0007]对所述缓存数组中的DOM元素进行遍历，确定出与所述搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素对应的起始索引和终止索引；
[0008]通过预设的自定义元素注册器，创建所述每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；
[0009]基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。
[0010]在本申请的一种实现方式中，所述根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素之前，所述方法还包括：
[0011]基于Vue环境和Node环境，构建用于文本高亮显示的搜索框架，并创建用于遍历的节点迭代器；
[0012]获取具有搜索需求的用户，并确定出所述具有搜索需求的用户对应的数字服务终端；
[0013]基于所述用户对应的数字服务终端，将所述搜索框架推送至所述用户，并基于所述数字服务终端，获取所述用户在所述搜索框架上输入的搜索文本。
[0014]在本申请的一种实现方式中，所述根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素，并将所述DOM元素存储至缓存数组中，具
体包括：
[0015]根据用户在搜索框架上输入的搜索文本，在预先创建的节点迭代器中进行遍历，并获取与所述搜索文本相关联的所有DOM元素；
[0016]在所述所有DOM元素中进行遍历，确定出指定类型的若干个DOM元素，并将所述指定类型的若干个DOM元素存储至缓存数组中；所述指定类型为显示原始文本后文本内容的类型。
[0017]在本申请的一种实现方式中，所述对所述缓存数组中的DOM元素进行遍历，确定出与所述搜索文本相匹配的待标记DOM元素，具体包括：
[0018]对所述用户输入的搜索文本进行语义分析，并根据分析结果，将所述搜索文本划分为对应的若干个关键词；
[0019]根据所述搜索文本对应的若干个关键词，对所述缓存数组中的DOM元素进行遍历，并在所述缓存数组中分别确定出与所述若干个关键词相匹配的待标记DOM元素。
[0020]在本申请的一种实现方式中，所述确定每个待标记DOM元素对应的起始索引和终止索引，具体包括：
[0021]确定出每个关键词对应的待标记DOM元素在所述缓存数组中的存储位置，并确定每个关键词对应的字符串长度；
[0022]根据关键词对应的存储位置，确定所述关键词的起始存储位置，并根据所述起始存储位置，确定所述关键词在所述缓存数组中对应的起始索引；
[0023]根据所述关键词对应的存储位置以及所述关键词对应的字符串长度，确定所述关键词的终止存储位置，并根据所述终止存储位置，确定所述关键词在所述缓存数组中对应的终止索引。
[0024]在本申请的一种实现方式中，所述通过预设的自定义元素注册器，创建所述每个待标记DOM元素对应的待渲染DOM元素子树，具体包括：
[0025]通过预设的自定义元素注册器注册多个待标记DOM元素，并为每个待标记DOM元素创建对应的待渲染DOM元素子树；
[0026]将待标记DON元素对应的关键词包裹至对应的待渲染DOM元素子树中，并在所述待渲染DOM元素子树中，将所述待标记DOM元素定义为高亮显示样式。
[0027]在本申请的一种实现方式中，所述基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示，具体包括：
[0028]根据待标记DOM元素对应的起始索引和终止索引，在所述缓存数组中找到所述待标记DOM元素，并通过所述待标记DOM元素对应的待渲染DOM元素子树，对所述待标记DOM元素进行替换；
[0029]基于所述待渲染DOM元素子树，将对应的关键词在所述缓存数组中进行高亮显示，以实现对搜索文本的高亮显示。
[0030]在本申请的一种实现方式中，所述基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示之后，所述方法还包括：
[0031]确定所述搜索文本对应的所有待渲染DOM元素子树，并根据所述所有待渲染DOM元
素子树对应的节点名称，在所述缓存数组中进行遍历；
[0032]通过每个待渲染DOM元素子树对应的待标记DOM元素，将所述缓存数组中的待渲染DOM元素子树进行替换，以将所述搜索文本的高亮显示进行清除。
[0033]另一方面，本申请实施例还提供了一种基于Vue的搜索文本高亮显示设备，所述设备包括：
[0034]至少一个处理器；
[0035]以及，与所述至少一个处理器通信连接的存储器；
[0036]其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上述的一种基于Vue的搜索文本高亮显示方法。
[0037]另一方面，本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：
[0038]如上述的一种基于Vue的搜索文本高亮显示方法。
[0039]本申请实施例提供了一种基于Vue的搜索文本高亮显示方法、设备及介质，至少包括以下有益效果：
[0040]通过节点迭代器遍历与搜索文本相关联的DOM元素，并将DOM元素存储至缓存数组中，以便于后续直接从缓存数组中对与搜索文本相关联的DON元素进行处理；通过遍历缓存数组中的DOM元素本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Vue的搜索文本高亮显示方法，其特征在于，所述方法包括：根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素，并将所述DOM元素存储至缓存数组中；对所述缓存数组中的DOM元素进行遍历，确定出与所述搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素对应的起始索引和终止索引；通过预设的自定义元素注册器，创建所述每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。2.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素之前，所述方法还包括：基于Vue环境和Node环境，构建用于文本高亮显示的搜索框架，并创建用于遍历的节点迭代器；获取具有搜索需求的用户，并确定出所述具有搜索需求的用户对应的数字服务终端；基于所述用户对应的数字服务终端，将所述搜索框架推送至所述用户，并基于所述数字服务终端，获取所述用户在所述搜索框架上输入的搜索文本。3.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素，并将所述DOM元素存储至缓存数组中，具体包括：根据用户在搜索框架上输入的搜索文本，在预先创建的节点迭代器中进行遍历，并获取与所述搜索文本相关联的所有DOM元素；在所述所有DOM元素中进行遍历，确定出指定类型的若干个DOM元素，并将所述指定类型的若干个DOM元素存储至缓存数组中；所述指定类型为显示原始文本后文本内容的类型。4.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述对所述缓存数组中的DOM元素进行遍历，确定出与所述搜索文本相匹配的待标记DOM元素，具体包括：对所述用户输入的搜索文本进行语义分析，并根据分析结果，将所述搜索文本划分为对应的若干个关键词；根据所述搜索文本对应的若干个关键词，对所述缓存数组中的DOM元素进行遍历，并在所述缓存数组中分别确定出与所述若干个关键词相匹配的待标记DOM元素。5.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述确定每个待标记DOM元素对应的起始索引和终止索引，具体包括：确定出每个关键词对应的待标记DOM元素在所述缓存数组中的存储位置，并确定每个关键词对应的字符串长度；根据关键词对应的存储...

【专利技术属性】
技术研发人员：贾希琦，
申请(专利权)人：浪潮智慧科技有限公司，
类型：发明
国别省市：