美文网首页
vue 选中的关键字高亮(单个字匹配 、多个字匹配)

vue 选中的关键字高亮(单个字匹配 、多个字匹配)

作者: Aurora_9e36 | 来源:发表于2021-04-11 10:55 被阅读0次

我这里做的是聊天对话的高亮, 单个字匹配 和多个字匹配 不说废话直接上代码吧!

标签部分:一定 用v-html 渲染出来

多个字匹配 :准备好关键词数组 以及对话的数组
先上效果图:


image.png

上代码 :

<template>
<div>
<div >
关键词数组:<span v-for="(item) in keywords" :key="item">{{ item }}、</span>




</div>
<div>
<div v-for="(item,index) in arr" :key="index">
<div >
<p>
<span>{{item.identity}}</span>:<span v-html="item.text"></span></p>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: '',
components: {},
data () {
return {
keywords: ['你', '再见', '哦', '好的', '没有', '嗯嗯'],
colors: ['#FFB5C5', '#EEC900', 'red', 'green', 'orange', 'red'],
arr: [
{
text: '嗨!好久不见你在干嘛呢!',
identity:"朋友"
},
{
text: '咦,你怎么在这里啊!',
identity:"我"
},
{
text: '我来这边逛逛,想不到遇见你了。',
identity:"朋友"
},
{
text: '哦,原来是这样啊,我也在这边逛逛',
identity:"我"
},
{
text: '我们还没有微信加一个吧!',
identity:"朋友"
},
{
text: '嗯嗯,加上了,那我们回头再见吧!',
identity:"朋友"
}
]
}
},
mounted () {
this.replaceArr(this.keywords)
},
methods: {
replaceArr (keywords) {
let arr = this.arr; //为什么要存这一步,就是不要随意直接操作data里面的值,之前的文章有讲到过。
keywords.forEach((keywordItem, keywordIndex) => {
// 匹配关键字正则
for (let index = 0; index < arr.length; index++) {
arr[index].text = arr[index].text.replace(keywordItem,<span style="color: red;">${keywordItem}</span>);
}
})
this.arr = arr;
}
}
}
</script>

单个字匹配:
先上效果图

image.png
代码如下:
<template>
<div>
<div >
关键字:<span>{{ keyword }}</span>




</div>
<div>
<div v-for="(item,index) in arr" :key="index">
<div >
<p>
<span>{{item.identity}}</span>:<span v-html="replaceArr(item.text,keyword)"></span></p>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: '',
components: {},
data () {
return {
keyword:'不',
colors: ['#FFB5C5', '#EEC900', 'red', 'green', 'orange', 'red'],
arr: [
{
text: '嗨!好久不见你在干嘛呢!',
identity:"朋友"
},
{
text: '咦,你怎么在这里啊!',
identity:"我"
},
{
text: '我来这边逛逛,想不到遇见你了。',
identity:"朋友"
},
{
text: '哦,原来是这样啊,我也在这边逛逛',
identity:"我"
},
{
text: '我们还没有微信加一个吧!',
identity:"朋友"
},
{
text: '嗯嗯,加上了,那我们回头再见吧!',
identity:"朋友"
}
]
}
},
methods: {
replaceArr (item ,keyword) {
let Reg = new RegExp(keyword)
if (item) {
let res = item.replace(Reg, <span style="color: red;">${keyword}</span>);
return res;
}
}
}
}
</script>

复制即用 ,小老乡不用谢我,哈哈哈哈哈!

相关文章

  • iOS 文字实现高亮

    /**正则匹配关键字高亮 keyword就是需要高亮的关键字 options:NSRegularExpressio...

  • Shell 脚本攻略-文本操作

    grep --color=auto 会高亮匹配的关键字 -o 只显示匹配的关键字 -n 显示行号 grep -E ...

  • 5. Redis key相关命令

    KEYS pattern 返回所有给定模式的key(pattern类似于正则) *: 匹配任意个字符 ?: 匹配单...

  • Python正则表达式

    希望大家喜欢,点赞哦单个字符及其匹配: 多个字符及其匹配:|多个字符|匹配||*|匹配前一个字符0次或者无限次||...

  • re 模块(正则表达式)

    使用过程 匹配单个字符 匹配多个字符 匹配开头结尾 匹配分组 re 模块的高级用法 search findall ...

  • 元字符

    . 匹配任意单个字符[] 匹配指定范围内的任意单个字符[^] (取反)匹配指定范围外的任意单个字符[:alnum:...

  • 常用的通配符

    *:匹配0或多个任意字符?:匹配任意单个字符[list]:匹配[list]中的任意单个字符,或者一组单个字符 ...

  • 四、正则表达式

    1 匹配单个字符 匹配符功能.匹配任意1个字符(除了\n)[ ]匹配[ ]中列举的字符\d匹配数字,即0-9\D匹...

  • Linux基本正则表达式

    基本正则表达式 字符匹配: .:匹配任意单个字符 [ ]:匹配指定范围内的任意单个字符 [^]:匹配指定范围外的任...

  • linux命令行的通配符

    代表匹配零个或多个字符? 代表匹配单个字符,[] 代表只要在中括号中的元素都能匹配,但是只能匹配一个

网友评论

      本文标题:vue 选中的关键字高亮(单个字匹配 、多个字匹配)

      本文链接:https://www.haomeiwen.com/subject/ivbtlltx.html