【实现搜索结果中搜索内容关键字高亮】

待我称王封你为后i 2023-06-14 10:47 19阅读 0赞

![20191119142041428.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70][]

`// 筛选变色`

`brightenKeyword(val, keyword) {`

`  ``val = val +``''``;`

`  ``if` `(val.indexOf(keyword) !== -1 && keyword !==``''``) {`

`    ``return` `val.replace(keyword,``'<font color="#409EFF">'` `+ keyword +``'</font>'``)`

`  ``}``else` `{`

`   ``return` `val`

`  ``}`

`}`

`// 或者用正则表达式`

`brightenKeyword(val, keyword) {`

`  ``const Reg =``new` `RegExp(keyword,``'i'``);`

`  ``if` `(val) {`

`    ``return` ``val.replace(Reg, `<span style=```"color: #409EFF;"```>${keyword}</span>`);``

`  ``}`

`}`

`// 使用方法`

`<el-table-column label=``"维护内容"``>`

`  ``<template slot-scope=``"scope"``>`

`   ``<span v-html=``"brightenKeyword(scope.row.strContent, filters.strContent)"` `></span>`

`  ``</template>`

`</el-table-column>`

[20191119142041428.png]: https://img-blog.csdnimg.cn/20191119142041428.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191119142121895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTY3OTM0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关【实现搜索结果中搜索内容关键字高亮】

![20191119142041428.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

待我称王封你为后i/ 2023年06月14日 10:47/ 0 赞/ 20 阅读

相关匹配关键字搜索内容高亮

export const codeText = (keyWord, content) => { const searchArray = keyWord.s

骑猪看日落/ 2023年01月18日 04:14/ 0 赞/ 86 阅读

相关 5 Lucene笔记（五）：搜索结果高亮

package ch.lucene.app; import java.util.ArrayList; import java.util.List; import

系统管理员/ 2022年07月16日 09:20/ 0 赞/ 160 阅读

相关 Solr搜索引擎(6)搜索结果高亮

1、设置高亮 SolrQuery query = new SolrQuery(); ... //高亮 query.setHighlight

秒速五厘米/ 2022年06月07日 00:59/ 0 赞/ 258 阅读

相关在WSS中高亮显示搜索结果

SharePoint中的搜索结果默认是不高亮显示搜索关键字的，最近我看到老外有一篇文章介绍如何实现这个为了防止文章无法打开，就把它转载到这里一下。原文地址：[htt

谁践踏了优雅/ 2022年01月09日 13:21/ 0 赞/ 243 阅读

相关在WSS中高亮显示搜索结果

SharePoint中的搜索结果默认是不高亮显示搜索关键字的，最近我看到老外有一篇文章介绍如何实现这个为了防止文章无法打开，就把它转载到这里一下。原文地址：[htt

Love The Way You Lie/ 2022年01月06日 15:27/ 0 赞/ 255 阅读

相关 iOS - 搜索关键字在结果中高亮显示

self.labelContent.attributedText = [self highlightText:self.searchStr inStr:searc

阳光穿透心脏的1/2处/ 2021年11月05日 12:34/ 0 赞/ 382 阅读

相关 Android 搜索结果匹配关键字且高亮显示

1. 单关键字匹配如果只是单关键字的话，那么我们先计算出他的下标，它的长度，然后就可以标记下标到下标+长度的这一段为特殊颜色即可，代码如下： if (name

╰+攻爆jí腚メ/ 2021年09月26日 05:10/ 0 赞/ 495 阅读

相关呦西震惊--AamazeUIDatabales搜索框中关键字与搜索内容高亮显示

第一引入jquery.highlight.js文件，切记路径要正确。下面是j该js文件 / jQuery Highlight plugin Based on

你的名字/ 2021年07月04日 20:46/ 0 赞/ 387 阅读

相关 solr搜索关键字高亮显示

solr搜索关键字高亮显示主要步骤: 后端: 1.高亮选项初始化 HighlightQuery query=new SimpleHighlightQuery(); H...

朱雀/ 2020年10月24日 00:23/ 0 赞/ 943 阅读