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

最新推荐文章于 2024-10-25 11:35:26 发布

原创最新推荐文章于 2024-10-25 11:35:26 发布 · 576 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

文章介绍了如何在数据详情弹框中实现全文关键字标红以及自动定位到第一个关键字的功能。通过使用正则表达式进行关键字匹配和HTML标签插入实现标红，然后利用scrollIntoView方法进行元素定位。作者对使用setTimeout可能存在关键字处理未完成的问题提出了疑问，寻求更优解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

一、解决步骤

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，请各位大佬帮忙看看，针对这个需求有没有更优解