vue3实现搜索并高亮文字

本文介绍: 在做文字处理的项目时经常会遇到搜索文字并高亮的需求，常见的实现方式有插入标签和贴标签两种。这两种方式适用于不同的场景，各有优劣。为了方便操作，直接起一个Vue 项目，在里面演示。

watch(
  () =&gt; route,
  (newValue) =&gt; {
    searchDetail.value.searchValue = route.query.text;
    searchList.value.forEach((item: object, index: number) =&gt; {
      montagePFun(item, index);
    });
  },
  {
    deep: true
  }
);

const montagePFun = (info, index) => {
  const regExp = new RegExp(searchDetail.value.searchValue, 'g');
  let title = searchList.value[index].title.replaceAll(regExp, `<span style="color: #FE8549;">${searchDetail.value.searchValue}</span>`);
  let user = searchList.value[index].userName.replaceAll(regExp, `<span style="color: #FE8549;">${searchDetail.value.searchValue}</span>`);
  let content = searchList.value[index].content.replaceAll(regExp, `<span style="color: #FE8549;">${searchDetail.value.searchValue}</span>`);
  document.querySelector(`.title${index}`).innerHTML = title;
  document.querySelector(`.user${index}`).innerHTML = user;
  document.querySelector(`.content${index}`).innerHTML = content;
};