示例:结果文字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:在这里插入图片描述
二、使用正则表达式,为contentText依次替换每一个wordsArray里的文字(默认文字替换为带有红色格式),如下:
(此时RegExp(word, 'i')是忽略大小写匹配,实测是匹配一次。如果想要多次匹配们可以使用RegExp(word, 'g')全局匹配,详情请移步:正则表达式匹配 个人根据实际情况进行选择)

		//将文字标红
        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, `<span style="color: red;">${word}</span>`);
          }
          return res;//此时的res里已经将需要标红的字体带上了格式(<span style="color:red"></span>)
        },

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

<span v-html="brightenKeyword(record.productName,oldSearchText)"></span>

四、最终结果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐