vue 仿浏览器关键词高亮定位搜索

使用场景

最近项目里面，需要做一个仿浏览器进行关键搜词搜索高亮定位功能；

思路：

1. 先定义一个放页面内容的容器，然后通过 js方式，或者refs方式获取其内容区域，并获取下面的html代码内容；
2. 然后再每次搜索之前，都需要将 高亮的关键词替换回来，不然就会出现 高亮标签里面嵌套高亮标签，出现反复叠加现象；
3. 删除当前关键词高亮色；
4. 设置本次搜索的关键词高亮背景色；
5. 进行内容替换；
6. 为首个关键词进行高亮，设置为当前关键词；

实现代码：

1. 定位内容区域

<div class="editor-text container">内容区域<div>

2.获取内容区域内容包括HTML标签，为搜索词进行高亮

 searchInputText() {
      this.searchNum = 0; //本页有多少个关键词
      this.indexNum = 0; //当前关键词序号
      let searchVal = this.searchVal;
      //container是内容区域的类名
      let main = document.querySelector(".container");
      let innerHTML = main.innerHTML;
      // 每次搜索之前都需要将em替换回来，不然就会出现em里面套em的情况而导致em数量一直叠加
      let emReg1 = new RegExp('<em class="searchWord">', "g");
      innerHTML = innerHTML.replace(emReg1, "");
      let emReg2 = new RegExp("</em>", "g");
      innerHTML = innerHTML.replace(emReg2, "");

      //删除当前关键词的背景色
      let emReg3 = new RegExp('<em class="currentSearchWord">', "g");
      innerHTML = innerHTML.replace(emReg3, "");
      let emReg4 = new RegExp("</em>", "g");
      innerHTML = innerHTML.replace(emReg4, "");

      if (this.searchVal) {
        // 设置本次搜索背景色
        let reg = new RegExp(searchVal, "g");
        innerHTML = innerHTML.replace(reg, '<em class="searchWord">' + searchVal + "</em>");
      }

      // 替换配置
      main.innerHTML = innerHTML;

      if (this.searchVal) {
        //首个关键词高亮
        this.searchGaoLian();
      }
    },

3. 关键词高亮

 searchGaoLian() {
      let searchVal = this.searchVal;
      this.searchNum = document.getElementsByTagName("em").length;
      if (this.searchNum != 0) {
        // 使用.style.background会出现em删不掉会一直叠加的情况 因此只能替换innerHTML
        document.getElementsByTagName("em")[0].innerHTML = '<em class="currentSearchWord">' + searchVal + "</em>";
        // 滚动到第一个关键字位置
        document.getElementsByTagName("em")[0].scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
      }
    },

4. 关键词移动（上一步，下一步）

 //移动关键字
    moveToSearch(step) {
      let searchVal = this.searchVal;
      if (!searchVal) return;
      if (this.searchNum != 0) {
        for (let i = 0; i < document.getElementsByTagName("em").length; i++) {
          document.getElementsByTagName("em")[i].innerHTML = searchVal;
        }
        if (step === -1 && this.indexNum === 0) {
          //上一步，处理临边值
          this.indexNum = this.searchNum - 1;
        } else if (step === 1 && this.indexNum === this.searchNum - 1) {
          //下一步，处理临边值
          this.indexNum = 0;
        } else {
          this.indexNum = this.indexNum + step;
        }
        document.getElementsByTagName("em")[this.indexNum].innerHTML =
          '<em class="currentSearchWord">' +
          searchVal +
          "</em>";
        document.getElementsByTagName("em")[this.indexNum].scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
        let currentTags = document.getElementsByClassName("currentSearchWord")[0];
        if (currentTags) {
          currentTags.scrollIntoView({
            behavior: 'smooth',
            block: 'center'
          })
        }

      }
    },

预览效果

其中黄色代表：本次搜索的关键词，橙色代表：当前关键词

参考资料：

• vue实现一个类似浏览器搜索功能(ctrl + f)