匹配内容高亮

韩大璐

已于 2022-10-18 22:23:32 修改

阅读量205

点赞数

分类专栏： vue 文章标签： vue js 正则表达式 javascript

于 2022-10-18 22:21:49 首次发布

本文链接：https://blog.csdn.net/weixin_41257563/article/details/127397949

版权

vue 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

需求：

通过正则表达式匹配一段内容，匹配到的部分在原内容上高亮显示，实现效果如下：
在这里插入图片描述

实现方式：

拿到匹配到的内容，给匹配到的内容加上标签样式去替换原文本里的这段内容；

/**
* matches是一个数组，其中每一项包含text、match两个字段
* text为原文本
* match为匹配到的内容
* 使用replace方法实现文本替换，通过v-html指令将替换完毕后的内容添加至页面
*/
matchText(){
   let text = ''
   this.matches.forEach((item, index)=>{
       let matchText = item.text.replace(item.match, `<span style='background:rgba(24, 144, 255, .3)'>${item.match}</span>`)
       text += `<p style="margin-bottom: ${index<(this.matches.length)?16:0}px">${matchText}</p>`;
   })
   return text
}