vue实现多组关键词对应高亮显示功能

2024-09-30 20:03:12

先上效果图：

我们有多组关键词，这里实现了关键词的背景色与匹配值的字体颜色值相同

先拟定一组数据

colors: [
    "#FFB5C5",
    "#EEC900",
    "#D1EEEE",
    "#40E0D0",
    "#FFFF00",
    "#FF7F00",
    "#FF6A6A",
    "#B3EE3A",
    "#9F79EE",
    "#FFC1C1"
   ],
   keywordsdetail: ["好看", "美丽", "wfewf"],
   comments: [
    {
     text: "老师 好看好看222"
    },
    {
     text: "老师美丽11111极了"
    },
    {
     text: "老师太搞笑34234了"
    },
    {
     text: "老师搞笑的不的了"
    },
    {
     text: "老师:ox::beer:wfewf啊"
    }
   ]

我们自定义一些颜色值以及关键词和详情文字

用内联样式的方法设置关键词的不同背景色显示

<span
    v-for="(item,index) in keywordsdetail"
    :key="index"
    class="keyworditem"
    :style="{backgroundColor:colors[index]}"
    @click="showpartkey(index,comments)"
   >{{item}}</span>

下面定义关键词匹配改变字体颜色的方法

changeColor(resultsList, keywords) {
   keywords.map((keyitem, keyindex) => {
    resultsList.map((item, index) => {
     if (keyitem && keyitem.length > 0) {
      // 匹配关键字正则
      let replaceReg = new RegExp(keyitem, "g");
      // 高亮替换v-html值
      let replaceString =
       '<span class="highlight"' +
       ' style="color: ' +
       this.colors[keyindex] +
       ';">' +
       keyitem +
       "</span>";
      resultsList[index].text = item.text.replace(
       replaceReg,
       replaceString
      );
     }
    });
   });

   this.comments = [];
   this.comments = resultsList;
  }

我们主要看这一行

let replaceString = '<span class="highlight"' +' style="color: ' + this.colors[keyindex] + ';">' + keyitem + "</span>";

这里采取了字符串拼接的方法来进行渲染

但如果你写成这样

<span class="highlight">keyitem</span>

然后在css中定义highlight的样式

.highlight {
color:red
}

这样做是不生效的

解释我参考了这位兄弟说的

所以解决方法有以下几种

1.直接去掉css的scoped属性但是这样做很容易搞乱布局

2.写成以下形式

.aaa >>>.highlight{
color:red
}

3.把样式以字符串拼接的方式插入

这样做的好处是可以动态设置v-html的样式

总结

以上所述是小编给大家介绍的vue实现多组关键词对应高亮显示功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

基于Vue实现关键词实时搜索高亮显示关键词

最近在做移动real-time-search于实时搜索和关键词高亮显示的功能,通过博客的方式总结一下,同时希望能够帮助到别人~~~ 如果不喜欢看文字的朋友我写了一个demo方便已经上传到了github上,可以clone下来直接看代码 https://github.com/IT0315/real-time-search.git 下面是demo运行的效果图好了闲话不多说直接上代码实时搜索实时搜索通过触发input事件和定时器来实现 <input v-model="keyWords&quo
vue中使用iview自定义验证关键词输入框问题及解决方法

一.验证需求对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru
Vue 菜单栏点击切换单个class(高亮)的方法

步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu
vue实现点击当前标签高亮效果【推荐】

实现点击按钮使当前按钮高亮,其他按钮复原的效果实现思路 •在data中定义即将渲染的数据,及active data() { return { wpList: [ { name: '食品饮料' }, { name: '鲜花' }, { name: '蛋糕' }, { name: '水果生鲜' }, { name: '服装鞋帽' }, { name: '其它' } ], active:'' } } ... •定义高亮的标签类名 .active { background: #fd7522; bord
Vue-路由导航菜单栏的高亮设置方法

如下所示: 默认情况下,路由的导航菜单,会自动给当前菜单添加router-link-exact-active 和router-link-active 类. 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名, 在路由规则配置中添加配置项linkActiveClass: 'mui-active',通过'mui-active'来自定义控制菜单栏切换样式以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,
vuejs 切换导航条高亮(路由菜单高亮)的方法示例

我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式如何解决刷新就不高亮或第一个高亮了,
vue实现a标签点击高亮方法

如下所示: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--<link hre
vue实现多组关键词对应高亮显示功能

先上效果图: 我们有多组关键词,这里实现了关键词的背景色与匹配值的字体颜色值相同先拟定一组数据 colors: [ "#FFB5C5", "#EEC900", "#D1EEEE", "#40E0D0", "#FFFF00", "#FF7F00", "#FF6A6A", "#B3EE3A", "#9F79EE", "#
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt
JavaScript实现的搜索及高亮显示功能示例

本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea
JS实现静态页面搜索并高亮显示功能完整示例

本文实例讲述了JS实现静态页面搜索并高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <body> <input id="key-word" class="k
Android 搜索结果匹配关键字且高亮显示功能

1. 单关键字匹配如果只是单关键字的话,那么我们先计算出他的下标,它的长度,然后就可以标记下标到下标+长度的这一段为特殊颜色即可,代码如下: if (name != null && name.contains(keyWord)) { int index = name.indexOf(keyWord); int len = keyWord.length(); Spanned temp = Html.fromHtml(name.substring(0, index) + "<
让VIM支持Nginx .conf文件语法高亮显示功能的方法

前言本文主要介绍了关于让VIM支持Nginx .conf文件语法高亮显示功能的方法,下面话不多说,来一起看看详细的介绍吧. 我们在编辑配置 Nginx 的配置文件(.conf)时,由于他没有高亮的功能,但是 Nginx 官方是支持这个功能的:要想在编辑配置 Nginx 配置文件(.conf)的时候高亮语法以降低配置的错误发生率,我们只需要使用 Nginx 官方的语法高亮文件就可以了. 手动修改下载Nginx配置文件的语法文件:nginx.vim wget http://www.vim.org
vue结合Echarts实现点击高亮效果的示例

本文主要介绍如何在vue中使用Echarts实现点击高亮效果. 1.首先看一下官方网站上的介绍: http://echarts.baidu.com/api.html#action.graph.focusNodeAdjacency 2.在初始化的时候绑定这两个事件.需要绑定的事件是鼠标的点击事件和右键点击事件. mounted: function () { let that = this; let myChart = this.$echarts.init(document.getElementBy
使用Vue中 v-for循环列表控制按钮隐藏显示功能

v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. - 实现效果如图需求描述: 第一个显示蓝色按钮,代表数据最终状态:其余按钮为灰色,显示数据流转记录. 返回的数据类型前端页面代码 <div class="leftProcessBox"> <div class="leftProcess" v-for="(l
JavaScript简单实现关键字文本搜索高亮显示功能示例

本文实例讲述了JavaScript简单实现关键字文本搜索高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

vue实现多组关键词对应高亮显示功能

相关推荐

随机推荐