vue项目高亮显示搜索内容

最近项目中用到了高亮显示搜索结果，自己也是百度了好一阵子，拼凑来的，这里记录一下

效果图

html结构

  <!-- html -->
  <fieldset>
    <el-input
      v-model="search"
      style="width: 200px;"
      @keyup.enter.native="handleSearch"
    ></el-input>
    <ul>
      <li
        class="li"
        v-for="item in listData"
        :key="item"
        
      >
        {{ item }}
      </li>
    </ul>
  </fieldset>

 data中数据定义

  data() {
    return {
      // 搜索关键字
      search: '',

      // 定义需要特殊处理的字符
      specialChar: ['*','.','?','+','$','^','[',']','(',')','{','}','|','\\','/' ],
      
      // 模拟数据
      listData: [
        '春江花月夜',
        '春江潮水连海平，海上明月共潮生。',
        '滟滟随波千万里，何处春江无月明！',
        '江流宛转绕芳甸，月照花林皆似霰。',
        '空里流霜不觉飞，汀上白沙看不见。',
        '(带有特殊字符)',
        '[唐诗三百首]',
        '字母匹配: a',
        '字母匹配: A',
      ]
    };
  },

  methods: {
    handleSearch() {
      // 获取所有的li标签
      let allLi = document.getElementsByClassName('li')

      // 当前搜索的值
      let curSearchVal = this.search

      // 先定义一个空的正则
      let regReplace = ''

      // 对搜索关键字进行遍历，如果包含特殊字符，进行转义
      for(let i=0;i<curSearchVal.length;i++){
        if( this.specialChar.includes(curSearchVal[i])) {
          regReplace += `\\${curSearchVal[i]}`
        }else {
          regReplace += `${curSearchVal[i]}`
        }
      }

      //不区分大小写的匹配特殊字符（也可 new RegExp(regReplace,'ig') 进行全局匹配 ）
      let searchReg = new RegExp(regReplace,'i');

      // 循环，进行匹配
      allLi.forEach( li => {
        // 获取每项li标签的文本内容
        let text = li.innerText
        // 内容替换
        li.innerHTML = text.replace(searchReg, value => {
          return `<span style="color: red; background: yellow;">${value}</span>`
        })

      })
    }
  },

也可在标签上通过 v-html 来进行高亮显示，跟上面基本没什么区别

    <el-table :data="data" border>
      <el-table-column label="序号" prop="index" width="80"></el-table-column>
      <el-table-column label="名称" prop="name" width="100">
        <template slot-scope="{row}">
          <div v-html="getReplace(row.name)"></div>
        </template>
      </el-table-column>
    </el-table>

    getReplace(str) {
      // 如果有搜索
      if(this.searchVal) {
        let keyWords = this.searchVal
          // 同样定义空的正则
          let newKey = ''

          // 需要转义的特殊字符处理
          for(let i = 0; i < keyWords.length; i ++ ){
            if(this.specialChar.includes(keyWords[i])) {
              newKey += `\\${keyWords[i]}`
            }else {
              newKey += keyWords[i]
            }
          }

        let searchReg = new RegExp(newKey,'i'); //不区分大小写的匹配特殊字符
        let text = str.replace(searchReg,  (value) => {
          return '<span style="color: red; background: #FFFF00;">' + value + "</span>"
        })
        return text
      }else {
        // 无搜索
        return str
      }
    }