Vue实现搜索关键字高亮展示

最新推荐文章于 2024-05-07 23:37:14 发布

一只胖橘子~

最新推荐文章于 2024-05-07 23:37:14 发布

阅读量497

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_56948802/article/details/131696979

版权

前言

简单描述一下需求：数据查看详情时，打开详情弹框，全文关键字标红！！！并且打开详情弹窗自动定位到第一个关键字位置

一、解决步骤

1.关键字标红

html部分：

    <span v-html="keywordMatch(content)"></span>

js部分：

   keywordMatch(data{
                      let keywords = "人工智能"; //搜索关键字
                      const reg = new RegExp(keywords, "gi"); // 要替换内容的正则，i不区分大小写，g全局匹配
                       return data.replace( reg,  (val) =>  `<span style="color:red!important;" class="test">${val}</span>` );
      }

这样标红展示关键字就解决了

2.定位关键字

现在看怎么才能实现打开弹窗定位到第一个关键字,此处我使用到了scrollToElement()方法

代码如下：

   //  查看详情方法
    _queryDetail(id) {
      queryDetail(id).then((data) => {  
        this.rulesContent = data.content.replace(/\n/g, "<br>");  //从后端获取到全文
        this.lawsRuleDetailDialog = true;
        setTimeout(() => {
          var element = document.getElementsByClassName("test")[0];  //打开弹窗获取到第一个关键字
          this.tableDatailLoading = false;
          this.scrollToElement(element);
        }, 500);
      });
    },
    scrollToElement(element) {
      console.log(element, "element");
      if (element) {
        element.scrollIntoView({
          behavior: "smooth", // 平滑过渡
          block: "start" // 上边框与视窗顶部平齐。默认值
        });
      }
    }

这样需求效果就实现啦！！！

但是对于使用scrollIntoView()方法感觉不是最优解，因为此处我详情数据是后端获取，获取后需要先进行匹配关键字标红处理，使用定时器调用scrollIntoView（）方法，很有可能后端数据返回关键字标红还没处理完，这时候获取第一个关键字可能出现undefined，请各位大佬帮忙看看，针对这个需求有没有更优解