使用场景:用户通过搜索关健字(keyword),对文本进行匹配,并对匹配到的文本进行一些高亮处理
解析:使用的是JavaScript中的 RegExp(正则表达式)对象,var regExp = new RegExp(keyword,'g');
// keyword:是关键字,
g:执行全局匹配,如果不输入的话将会查一条,
i:执行大小写不敏感匹配,
m:执行多行匹配
详细代码:
1、使用原始的匹配项(match)来保持大小写。也就是说,关键字会匹配到文本的内容,同时文本的内容是不更改的
brightenKeyword(val, keyword) {const Reg = new RegExp(keyword, 'gi');if (val) {const res = val.replace(Reg, (match) => {// 使用原始的匹配项(match)来保持大小写return `<span style="color: #0D77E2;">${match}</span>`;});return res;}},
2、不保持匹配文本的大小写。也就是说文本内容是需要更改的。
brightenKeyword(val, keyword) {const Reg = new RegExp(keyword, 'gi');if (val) {const res = val.replace(Reg, <span style="color: #0D77E2;">${keyword}</span>);return res;}},
html调用:(示例只以vue为主,原生JS的话调用方法即可):
<text class="sList-info-title text-ellipsis" v-html="brightenKeyword('被匹配的文本',keyword)"></text>
好了,以上就可以获得简单的高亮处理了。