前端（js，vue）如何实现搜索结果根据关键字标红效果（正则表达式实现）

青旅半醒 2023-10-08 22:16 18阅读 0赞

示例：结果文字`contentText` ：“**地震采集测试**” ，关键字`keyword` ： “**采集**”

一、获取结果文字`contentText`与关键字`keyword`的共同值，即找到二者相同的字，存在一个数组wordsArray里，如下：

//获取需要标红的文字
            getRedWords(contentText, keyword) {
        
              let keywordArray = keyword.split('');
              let wordsArray = [];
              for(let key of keywordArray){
        
                if(contentText.includes(key)){
        
                  wordsArray.push(key)
                }
              }
              return wordsArray;
            },

得到结果wordsArray：![在这里插入图片描述][d3ef1b2689f2474e81fbe138dc212e34.png]  
二、使用正则表达式，为contentText依次替换每一个wordsArray里的文字（默认文字替换为带有红色格式），如下：  
*(此时`RegExp(word, 'i')`是忽略大小写匹配，实测是匹配一次。如果想要多次匹配们可以使用`RegExp(word, 'g')`全局匹配，详情请移步：[正则表达式匹配][Link 1] 个人根据实际情况进行选择)*

//将文字标红
 brightenKeyword(contentText, keyword) {
 
 let wordsArray = this.getRedWords(contentText, keyword);
 let res = contentText;//res的初始值是不带任何红色格式的
 //遍历相同字数组，
 for(let word of wordsArray){
 
 const Reg = new RegExp(word, 'i');
 //替换每一个相同字
 res = res.replace(Reg, `${
 word}`);
 }
 return res;//此时的res里已经将需要标红的字体带上了格式（）
 },

三、调用brightenKeyword方法，拿到返回值，并使用标签展示该结果，如下：

四、最终结果：  
![在这里插入图片描述][89d42be20c9c476f9239b73d1c6d111f.png]

[d3ef1b2689f2474e81fbe138dc212e34.png]: https://img-blog.csdnimg.cn/d3ef1b2689f2474e81fbe138dc212e34.png
[Link 1]: https://blog.csdn.net/litingyuki/article/details/89396966
[89d42be20c9c476f9239b73d1c6d111f.png]: https://img-blog.csdnimg.cn/89d42be20c9c476f9239b73d1c6d111f.png