CN116431756A - 一种基于Vue的搜索文本高亮显示方法、设备及介质 - Google Patents
一种基于Vue的搜索文本高亮显示方法、设备及介质 Download PDFInfo
- Publication number
- CN116431756A CN116431756A CN202310430772.8A CN202310430772A CN116431756A CN 116431756 A CN116431756 A CN 116431756A CN 202310430772 A CN202310430772 A CN 202310430772A CN 116431756 A CN116431756 A CN 116431756A
- Authority
- CN
- China
- Prior art keywords
- dom
- marked
- search text
- highlighting
- dom element
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 49
- 238000004458 analytical method Methods 0.000 claims description 6
- 238000010586 diagram Methods 0.000 description 8
- 238000004590 computer program Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction 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/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
- G06F16/31—Indexing; Data structures therefor; Storage structures
- G06F16/316—Indexing structures
- G06F16/322—Trees
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
- G06F16/33—Querying
- G06F16/3331—Query processing
- G06F16/334—Query execution
- G06F16/3344—Query execution using natural language analysis
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/30—Semantic analysis
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Artificial Intelligence (AREA)
- Computational Linguistics (AREA)
- Software Systems (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- General Health & Medical Sciences (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本申请公开了一种基于Vue的搜索文本高亮显示方法、设备及介质，用以解决现有技术中的用户无法准确快速的获取到与搜索文本相关联的信息，查询效率较低，用户体验感较差的问题。方法包括：在预先创建的节点迭代器中获取与用户输入的搜索文本相关联的DOM元素并存储至缓存数组中；遍历缓存数组中的DOM元素确定与搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素的起始索引和终止索引；通过预设的自定义元素注册器创建每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；基于待标记DOM元素对应的起始索引和终止索引将待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种基于Vue的搜索文本高亮显示方法、设备及介质。
背景技术
目前，很多行业产生的数据量不断增加，数据量的快速增长标志着人们已经进入大数据的时代。随着大数据技术的飞速崛起，推动了数据的高效传播，网络系统中产生了海量数据，随之也产生了数据过载的问题。
用户在网络中查询所需搜索文本，且搜索到的相关文本较长时，用户无法准确定位到每篇相关文档中与搜索文本相匹配的内容，无法通过查看相匹配的内容，确定查询到的相关文档是否为自己所需的，这就导致用户无法方便快速的查看到与所需的搜索文本相关联的关键信息，查询效率较低，用户体验感较差。
发明内容
本申请实施例提供了一种基于Vue的搜索文本高亮显示方法、设备及介质，用以解决现有技术中的用户无法准确快速的获取到与搜索文本相关联的信息，查询效率较低，用户体验感较差的技术问题。
一方面，本申请实施例提供了一种基于Vue的搜索文本高亮显示方法，包括：
根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素，并将所述DOM元素存储至缓存数组中；
对所述缓存数组中的DOM元素进行遍历，确定出与所述搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素对应的起始索引和终止索引；
通过预设的自定义元素注册器，创建所述每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；
基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。
在本申请的一种实现方式中，所述根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素之前，所述方法还包括：
基于Vue环境和Node环境，构建用于文本高亮显示的搜索框架，并创建用于遍历的节点迭代器；
获取具有搜索需求的用户，并确定出所述具有搜索需求的用户对应的数字服务终端；
基于所述用户对应的数字服务终端，将所述搜索框架推送至所述用户，并基于所述数字服务终端，获取所述用户在所述搜索框架上输入的搜索文本。
在本申请的一种实现方式中，所述根据用户输入的搜索文本，在预先创建的节点迭代器中获取与所述搜索文本相关联的DOM元素，并将所述DOM元素存储至缓存数组中，具体包括：
根据用户在搜索框架上输入的搜索文本，在预先创建的节点迭代器中进行遍历，并获取与所述搜索文本相关联的所有DOM元素；
在所述所有DOM元素中进行遍历，确定出指定类型的若干个DOM元素，并将所述指定类型的若干个DOM元素存储至缓存数组中；所述指定类型为显示原始文本后文本内容的类型。
在本申请的一种实现方式中，所述对所述缓存数组中的DOM元素进行遍历，确定出与所述搜索文本相匹配的待标记DOM元素，具体包括：
对所述用户输入的搜索文本进行语义分析，并根据分析结果，将所述搜索文本划分为对应的若干个关键词；
根据所述搜索文本对应的若干个关键词，对所述缓存数组中的DOM元素进行遍历，并在所述缓存数组中分别确定出与所述若干个关键词相匹配的待标记DOM元素。
在本申请的一种实现方式中，所述确定每个待标记DOM元素对应的起始索引和终止索引，具体包括：
确定出每个关键词对应的待标记DOM元素在所述缓存数组中的存储位置，并确定每个关键词对应的字符串长度；
根据关键词对应的存储位置，确定所述关键词的起始存储位置，并根据所述起始存储位置，确定所述关键词在所述缓存数组中对应的起始索引；
根据所述关键词对应的存储位置以及所述关键词对应的字符串长度，确定所述关键词的终止存储位置，并根据所述终止存储位置，确定所述关键词在所述缓存数组中对应的终止索引。
在本申请的一种实现方式中，所述通过预设的自定义元素注册器，创建所述每个待标记DOM元素对应的待渲染DOM元素子树，具体包括：
通过预设的自定义元素注册器注册多个待标记DOM元素，并为每个待标记DOM元素创建对应的待渲染DOM元素子树；
将待标记DON元素对应的关键词包裹至对应的待渲染DOM元素子树中，并在所述待渲染DOM元素子树中，将所述待标记DOM元素定义为高亮显示样式。
在本申请的一种实现方式中，所述基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示，具体包括：
根据待标记DOM元素对应的起始索引和终止索引，在所述缓存数组中找到所述待标记DOM元素，并通过所述待标记DOM元素对应的待渲染DOM元素子树，对所述待标记DOM元素进行替换；
基于所述待渲染DOM元素子树，将对应的关键词在所述缓存数组中进行高亮显示，以实现对搜索文本的高亮显示。
在本申请的一种实现方式中，所述基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示之后，所述方法还包括：
确定所述搜索文本对应的所有待渲染DOM元素子树，并根据所述所有待渲染DOM元素子树对应的节点名称，在所述缓存数组中进行遍历；
通过每个待渲染DOM元素子树对应的待标记DOM元素，将所述缓存数组中的待渲染DOM元素子树进行替换，以将所述搜索文本的高亮显示进行清除。
另一方面，本申请实施例还提供了一种基于Vue的搜索文本高亮显示设备，所述设备包括：
至少一个处理器；
以及，与所述至少一个处理器通信连接的存储器；
其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如上述的一种基于Vue的搜索文本高亮显示方法。
另一方面，本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：
如上述的一种基于Vue的搜索文本高亮显示方法。
本申请实施例提供了一种基于Vue的搜索文本高亮显示方法、设备及介质，至少包括以下有益效果：
通过节点迭代器遍历与搜索文本相关联的DOM元素，并将DOM元素存储至缓存数组中，以便于后续直接从缓存数组中对与搜索文本相关联的DON元素进行处理；通过遍历缓存数组中的DOM元素，确定出每个与搜索文本中内容相匹配的待标记DOM元素，进而能够确定出每个待标记DOM元素的起始索引和终止索引；通过预设的自定义元素注册器，能够为每个待标记DOM元素创建对应待渲染DOM元素子树，然后通过父节点执行替换元素节点命令，以根据待标记DOM元素的起始索引和终止索引，通过待渲染DOM元素子树替换对应的待标记DOM元素，从而实现对搜索文本的高亮显示，使得用户能够方便快捷的查看到所需的关键内容。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为本申请实施例提供的一种基于Vue的搜索文本高亮显示方法的流程示意图；
图2为本申请实施例提供的一种基于Vue的搜索文本高亮显示设备的内部结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本申请实施例提供了一种基于Vue的搜索文本高亮显示方法、设备及介质，通过节点迭代器遍历与搜索文本相关联的DOM元素，并将DOM元素存储至缓存数组中，以便于后续直接从缓存数组中对与搜索文本相关联的DON元素进行处理；通过遍历缓存数组中的DOM元素，确定出每个与搜索文本中内容相匹配的待标记DOM元素，进而能够确定出每个待标记DOM元素的起始索引和终止索引；通过预设的自定义元素注册器，能够为每个待标记DOM元素创建对应待渲染DOM元素子树，然后通过父节点执行替换元素节点命令，以根据待标记DOM元素的起始索引和终止索引，通过待渲染DOM元素子树替换对应的待标记DOM元素，从而实现对搜索文本的高亮显示，使得用户能够方便快捷的查看到所需的关键内容。解决了现有技术中的用户无法准确快速的获取到与搜索文本相关联的信息，查询效率较低，用户体验感较差的技术问题。
以下结合附图，详细说明本申请各实施例提供的技术方案。
图1为本申请实施例提供的一种基于Vue的搜索文本高亮显示方法的流程示意图。如图1所示，本申请实施例提供的一种基于Vue的搜索文本高亮显示方法，包括：
101、根据用户输入的搜索文本，在预先创建的节点迭代器中获取与搜索文本相关联的DOM元素，并将DOM元素存储至缓存数组中。
为了解决现有技术中用户无法直观的定位到与搜索文本相关联的关键内容在相关文档中的位置，本申请获取用户输入的搜索文本，并确定出预先创建的节点迭代器，节点迭代器表示遍历与搜索文本相关联的DOM子树中节点列表的成员的迭代器。服务器能够根据用户输入的搜索文本，在预先创建的节点迭代器中进行遍历，获取与搜索文本相关联的DOM元素，然后，服务器将获取到的与搜索文本相关联的DOM元素存储至缓存数组中，以便于服务器后续直接对缓存数组中相关联的DOM元素进行处理。
具体地，服务器根据用户在搜索框架上输入的搜索文本，在预先创建的节点迭代器中进行遍历，从而获取到与搜索文本相关联的所有DOM元素，然后，服务器在所有DOM元素中进行遍历，确定出指定类型的若干个DOM元素，并将指定类型的若干个DOM元素存储至缓存数组中。需要说明的是，本申请实施例中的指定类型为显示原始文本后文本内容的SHOW_TEXT类型，SHOW_TEXT用于描述Node类型的常量构成的位掩码。
在本申请的一个实施例中，服务器在根据用户输入的搜索文本，在预先创建的节点迭代器中获取与搜索文本相关联的DOM元素之前，基于Vue环境和Node环境，构建用于文本高亮显示的搜索框架，并创建用于遍历的节点迭代器。服务器获取具有搜索需求的用户，并确定出具有搜索需求的用户对应的数字服务终端，然后基于用户对应的数字服务终端，将搜索框架推送至用户，并基于数字服务终端，获取用户在搜索框架上输入的搜索文本。
102、对缓存数组中的DOM元素进行遍历，确定出与搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素对应的起始索引和终止索引。
服务器通过对缓存数组中的DOM元素进行遍历，对缓存数组中的DOM元素执行正则表达式，能够确定出与搜索文本相匹配的待标记DOM元素，然后，服务器确定出每个待标记DOM元素在缓存数组中的起始索引和终止索引，并对起始索引和终止索引进行记录存储，便于后续根据待标记DOM元素对应的起始索引和终止索引在缓存数组中找到待标记DOM元素。
具体地，服务器对用户输入的搜索文本进行语义分析，并根据分析结果，将搜索文本划分为对应的若干个关键词，然后，服务器根据搜索文本对应的若干个关键词，对缓存数组中的DOM元素进行遍历，从而能够在缓存数组中分别确定出与若干个关键词相匹配的待标记DOM元素。
服务器需要确定出每个关键词对应的待标记DOM元素在缓存数组中的存储位置，并确定每个关键词对应的字符串长度，从而根据关键词对应的存储位置，确定关键词的起始存储位置，并根据起始存储位置，确定关键词在缓存数组中对应的起始索引，然后，服务器根据关键词对应的存储位置以及关键词对应的字符串长度，确定关键词的终止存储位置，并根据终止存储位置，确定关键词在缓存数组中对应的终止索引。
103、通过预设的自定义元素注册器，创建每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令。
本申请设置有用于注册标记元素的自定义元素注册器，自定义元素注册器提供注册自定义元素和查询已注册元素的方法，本申请通过自定义元素注册器能够定义或者注册一个新的自定义元素。服务器通过设置的自定义元素注册器创建每个待标记DOM元素对应的待渲染DOM元素子树，并找到待标记DOM元素对应的父节点，从而通过待标记DOM元素对应的父节点执行替换元素节点命令。需要说明的是，本申请实施例中的待渲染DOM元素子树能够将创建的隐藏的、独立的DOM元素附加至对应的原始DOM元素上，替换元素节点命令用于将待渲染DOM元素子树替换当前节点上的待标记DOM元素，并返回被替换掉的节点。
具体地，服务器通过预设的自定义元素注册器注册多个待标记DOM元素，并分别为每个待标记DOM元素创建对应的待渲染DOM元素子树，然后，服务器将待标记DON元素对应的关键词包裹至对应的待渲染DOM元素子树中，并在待渲染DOM元素子树中，将待标记DOM元素定义为高亮显示样式。
104、基于待标记DOM元素对应的起始索引和终止索引，将待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。
在待标记DOM元素对应的父节点执行替换元素节点命令之后，服务器确定出待标记DOM元素对应的起始索引和终止索引，然后基于待标记DOM元素对应的起始索引和终止索引，将待渲染DOM元素子树将起始索引和终止索引对应的待标记DOM元素进行替换，从而能够通过待渲染DOM元素子树中定义的对待标记DOM元素的高亮显示样式，完成对搜索文本中多个待标记DOM元素的高亮显示，这样能够便于用户直观的定位到与搜索文本相关联的关键内容在相关文档中位置。
具体地，服务器根据待标记DOM元素对应的起始索引和终止索引，在缓存数组中找到待标记DOM元素，并通过待标记DOM元素对应的待渲染DOM元素子树，对待标记DOM元素进行替换，然后，服务器基于待渲染DOM元素子树，将对应的关键词在缓存数组中进行高亮显示，从而能够实现对搜索文本的高亮显示。
在本申请的一个实施例中，服务器在基于待标记DOM元素对应的起始索引和终止索引，将待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示之后，还需确定出搜索文本对应的所有待渲染DOM元素子树，并根据所有待渲染DOM元素子树对应的节点名称，在缓存数组中进行遍历，找到每个待渲染DOM元素子树，然后，服务器通过每个待渲染DOM元素子树对应的待标记DOM元素，将缓存数组中的待渲染DOM元素子树进行替换，从而在用户完成对搜索文本的查询之后，将搜索文本的高亮显示进行清除。
以上为本申请提出的方法实施例。基于同样的发明构思，本申请实施例还提供了一种基于Vue的搜索文本高亮显示设备，其结构如图2所示。
图2为本申请实施例提供的一种基于Vue的搜索文本高亮显示设备的内部结构示意图。如图2所示，设备包括：
至少一个处理器；
以及，与至少一个处理器通信连接的存储器；
其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：
根据用户输入的搜索文本，在预先创建的节点迭代器中获取与搜索文本相关联的DOM元素，并将DOM元素存储至缓存数组中；
对缓存数组中的DOM元素进行遍历，确定出与搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素对应的起始索引和终止索引；
通过预设的自定义元素注册器，创建每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；
基于待标记DOM元素对应的起始索引和终止索引，将待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。
本申请实施例还提供了一种非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：
根据用户输入的搜索文本，在预先创建的节点迭代器中获取与搜索文本相关联的DOM元素，并将DOM元素存储至缓存数组中；
对缓存数组中的DOM元素进行遍历，确定出与搜索文本相匹配的待标记DOM元素，并确定每个待标记DOM元素对应的起始索引和终止索引；
通过预设的自定义元素注册器，创建每个待标记DOM元素对应的待渲染DOM元素子树，并通过待标记DOM元素的父节点执行替换元素节点命令；
基于待标记DOM元素对应的起始索引和终止索引，将待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示。
本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本申请实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (10)
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元素在所述缓存数组中的存储位置，并确定每个关键词对应的字符串长度；
根据关键词对应的存储位置，确定所述关键词的起始存储位置，并根据所述起始存储位置，确定所述关键词在所述缓存数组中对应的起始索引；
根据所述关键词对应的存储位置以及所述关键词对应的字符串长度，确定所述关键词的终止存储位置，并根据所述终止存储位置，确定所述关键词在所述缓存数组中对应的终止索引。
6.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述通过预设的自定义元素注册器，创建所述每个待标记DOM元素对应的待渲染DOM元素子树，具体包括：
通过预设的自定义元素注册器注册多个待标记DOM元素，并为每个待标记DOM元素创建对应的待渲染DOM元素子树；
将待标记DON元素对应的关键词包裹至对应的待渲染DOM元素子树中，并在所述待渲染DOM元素子树中，将所述待标记DOM元素定义为高亮显示样式。
7.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示，具体包括：
根据待标记DOM元素对应的起始索引和终止索引，在所述缓存数组中找到所述待标记DOM元素，并通过所述待标记DOM元素对应的待渲染DOM元素子树，对所述待标记DOM元素进行替换；
基于所述待渲染DOM元素子树，将对应的关键词在所述缓存数组中进行高亮显示，以实现对搜索文本的高亮显示。
8.根据权利要求1所述的一种基于Vue的搜索文本高亮显示方法，其特征在于，所述基于所述待标记DOM元素对应的起始索引和终止索引，将所述待渲染DOM元素子树替换待标记DOM元素，以实现对搜索文本的高亮显示之后，所述方法还包括：
确定所述搜索文本对应的所有待渲染DOM元素子树，并根据所述所有待渲染DOM元素子树对应的节点名称，在所述缓存数组中进行遍历；
通过每个待渲染DOM元素子树对应的待标记DOM元素，将所述缓存数组中的待渲染DOM元素子树进行替换，以将所述搜索文本的高亮显示进行清除。
9.一种基于Vue的搜索文本高亮显示设备，其特征在于，所述设备包括：
至少一个处理器；
以及，与所述至少一个处理器通信连接的存储器；
其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1-8任一项所述的一种基于Vue的搜索文本高亮显示方法。
10.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：
如权利要求1-8任一项所述的一种基于Vue的搜索文本高亮显示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310430772.8A CN116431756B (zh) | 2023-04-18 | 2023-04-18 | 一种基于Vue的搜索文本高亮显示方法、设备及介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310430772.8A CN116431756B (zh) | 2023-04-18 | 2023-04-18 | 一种基于Vue的搜索文本高亮显示方法、设备及介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116431756A true CN116431756A (zh) | 2023-07-14 |
| CN116431756B CN116431756B (zh) | 2023-12-01 |
Family
ID=87083929
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310430772.8A Active CN116431756B (zh) | 2023-04-18 | 2023-04-18 | 一种基于Vue的搜索文本高亮显示方法、设备及介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116431756B (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110231385A1 (en) * | 2010-03-16 | 2011-09-22 | Microsoft Corporation | Object oriented data and metadata based search |
| CN112162729A (zh) * | 2020-09-23 | 2021-01-01 | 北京首钢自动化信息技术有限公司 | 一种基于vue的组件开发及展示方法 |
| CN112380337A (zh) * | 2020-11-13 | 2021-02-19 | 平安普惠企业管理有限公司 | 基于富文本的高亮方法及装置 |
| CN112860978A (zh) * | 2021-03-31 | 2021-05-28 | 中国工商银行股份有限公司 | 全局搜索方法和装置 |
| CN113868568A (zh) * | 2021-09-28 | 2021-12-31 | 深圳云之家网络有限公司 | 一种网页关键字高亮方法、装置、设备及存储介质 |
-
2023
- 2023-04-18 CN CN202310430772.8A patent/CN116431756B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110231385A1 (en) * | 2010-03-16 | 2011-09-22 | Microsoft Corporation | Object oriented data and metadata based search |
| CN112162729A (zh) * | 2020-09-23 | 2021-01-01 | 北京首钢自动化信息技术有限公司 | 一种基于vue的组件开发及展示方法 |
| CN112380337A (zh) * | 2020-11-13 | 2021-02-19 | 平安普惠企业管理有限公司 | 基于富文本的高亮方法及装置 |
| CN112860978A (zh) * | 2021-03-31 | 2021-05-28 | 中国工商银行股份有限公司 | 全局搜索方法和装置 |
| CN113868568A (zh) * | 2021-09-28 | 2021-12-31 | 深圳云之家网络有限公司 | 一种网页关键字高亮方法、装置、设备及存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 王齐, 陶世群: "一种基于文本节点的XML文档索引", 山西大学学报(自然科学版), no. 02 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116431756B (zh) | 2023-12-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107038207B (zh) | 一种数据查询方法、数据处理方法及装置 | |
| CN111522816B (zh) | 基于数据库引擎的数据处理方法、装置、终端及介质 | |
| CN106326309B (zh) | 一种数据查询方法和装置 | |
| CN110019384B (zh) | 一种血缘数据的获取方法、提供血缘数据的方法及装置 | |
| CN110969022B (zh) | 语义确定方法及相关设备 | |
| CN112579610A (zh) | 多数据源结构分析方法、系统、终端设备及存储介质 | |
| CN110020236B (zh) | 网页解析方法、装置、存储介质、处理器和设备 | |
| CN114297204A (zh) | 一种异构数据源的数据存储、检索方法及装置 | |
| CN111625728B (zh) | 一种网页文档生成检索目录的方法、装置、设备和介质 | |
| CN114116767A (zh) | 数据库sql查询语句转换方法及装置 | |
| CN116775830A (zh) | 一种在线技术文档搜索方法、设备及介质 | |
| CN116431756B (zh) | 一种基于Vue的搜索文本高亮显示方法、设备及介质 | |
| CN110825764A (zh) | 一种sql脚本的生成方法、系统、存储介质和处理器 | |
| CN110968555B (zh) | 维度数据处理方法和装置 | |
| CN111478985A (zh) | 一种服务域名基础信息动态配置方法 | |
| CN112541001A (zh) | 数据查询方法、装置、存储介质及设备 | |
| CN110019357B (zh) | 数据库查询脚本生成方法及装置 | |
| CN110019295B (zh) | 数据库检索方法、装置、系统以及存储介质 | |
| CN110929188A (zh) | 服务端页面渲染方法及装置 | |
| CN115495462A (zh) | 批量数据更新方法、装置、电子设备和可读存储介质 | |
| CN109710833B (zh) | 用于确定内容节点的方法与设备 | |
| CN114218278A (zh) | http接口的数据表字段查询方法及系统 | |
| CN108241695B (zh) | 信息处理方法及装置 | |
| CN108228604B (zh) | 基于内存对象的模型构建方法、信息查询方法及装置 | |
| CN111198877B (zh) | 数据存储和查询方法及装置 |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |