使用mark.js插件实现富文本内容关键词搜索

需求：需要对加载在页面中富文本内容进行关键词搜索滚动定位，不能讲html、css等相关文本内容检索出来。
问题：开始自己写了简单的搜索，但是会将html内容检索并显示在页面上。
解决：使用了mark.js的插件。插件文档：https://markjs.io/

image.png

实现效果：

image.png
image.png

代码：
HTML：

      <div class="search-bar float-left">
        <input name="keyword" id="keyword" type="text" />
          <span class="search-btn" id="searchBtn">搜索</span>
        </div>
        <div class="search-result-wrap float-left">
          <span>共搜索到<em id="viewCount">0</em> / <em id="totalCount">0</em>个</span>
          <button type="button" id="preBtn">上一个</button>
          <button type="button" id="nextBtn">下一个</button>
          <button type="button" id="clearBtn">清空</button>
        </div>

        <div class="article-content" id="articleContent">显示富文本内容的容器</div>

JS：

<!-- 引入本地mark.js，该插件支持原生dom查找，也支持jQuery dom查找，有需要自行引入jQuery即可-->
<script src="../js/mark.js" type="text/javascript"></script>
<script>
      var searchIndex = 0; // 搜索的下标
      var searchLen = 0; // 搜索到的总个数
      $(document).ready(function() {
         // 执行查找跳转
        $('#preBtn').click(function(){
          jumpUp();
        });
        $('#nextBtn').click(function(){
          jumpDown();
        });
        $('#clearBtn').click(function(){
          jumpClear();
        });
        // 点击搜索按钮进行关键词查找
        $('#searchBtn').click(function(){
          var value = $('#keyword').val();
          if (value && value != '') {
            searchVal();
          } else {
            // 执行操作
          }
        });
      })；
      // 搜索
      function searchVal() {
        searchIndex = 0;
        searchLen = 0;
        var context = document.querySelector('#articleContent');
        var instance = new Mark(context);
        instance.unmark().mark($('#keyword').val());
        searchLen = document.querySelectorAll('mark').length;
        console.log($('mark').eq(searchIndex))
        // $('mark').eq(searchIndex).css('background', '#ffa44b');
        // $('mark').eq(searchIndex).siblings().css('background', '#ff0');
        $('mark').each(function(i){
          if (i == searchIndex) {
            $(this).css('background', '#ffa44b');
          } else {
           $(this).css('background', '#ff0')
          }
        });
        jump();
        $('#viewCount').text((searchLen == 0) ? 0 : (searchIndex + 1));
        $('#totalCount').text(searchLen);
      };
      
      // 搜索跳转
      function jump() {
        if (document.querySelector('mark') != null) {
          document.querySelectorAll('mark')[searchIndex].scrollIntoView({ block: 'center' });
        }
        $('#viewCount').text((searchLen == 0) ? 0 : (searchIndex + 1));
        $('#totalCount').text(searchLen);
         // 使用.eq()的方法查找修改背景的话，不能进行跨标签修改背景色，所以使用了.each()方法进行遍历
        // $('mark').eq(searchIndex).css('background', '#ffa44b');
        // $('mark').eq(searchIndex).siblings().css('background', '#ff0');
        $('mark').each(function(i){
          if (i == searchIndex) {
            $(this).css('background', '#ffa44b');
          } else {
            $(this).css('background', '#ff0')
          }
        });
      };
      
      //搜索上一个
      function jumpUp() {
        if (searchIndex > 0) {
            searchIndex--;
            jump()
        } else {
            layer.msg('已经到顶部了！');
        }
      };
      
      //搜索下一个
      function jumpDown() {
        if (searchIndex >= (searchLen - 1)) {
            layer.msg('已经到底部了！');
        } else {
            searchIndex++;
            jump();
        }
      };
      
      //清空搜索 
      function jumpClear() {
        searchIndex = 0;
        searchLen = 0;
        $('#viewCount').text((searchLen == 0) ? 0 : (searchIndex + 1));
        $('#totalCount').text(searchLen);
        // 其他操作
      };
</script>