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


Posted in Javascript onJuly 25, 2019

先上效果图:

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

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

先拟定一组数据

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实现多组关键词对应高亮显示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
动态加载外部javascript文件的函数代码分享
Jul 28 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
微信小程序实现原生步骤条
Jul 25 #Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 #Javascript
微信小程序实现收货地址左滑删除
Nov 18 #Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
You might like
用PHP连接MySQL代码的参数说明
2008/06/07 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
php检测文本的编码
2015/07/26 PHP
全面解析PHP验证码的实现原理 附php验证码小案例
2016/08/17 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
jquery检测上传文件大小示例
2020/04/26 jQuery
Python的Flask框架中web表单的教程
2015/04/20 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
python实现石头剪刀布程序
2021/01/20 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
用python写PDF转换器的实现
2020/10/29 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
简历中自我评价范文3则
2013/12/14 职场文书
实习单位评语
2014/04/26 职场文书
医院义诊活动总结
2014/07/04 职场文书
师德师风整改措施
2014/10/24 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
交通安全温馨提示语
2015/07/14 职场文书
改进工作作风心得体会
2016/01/23 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA