vue3实现搜索并高亮文字

watch(
  () => route,
  (newValue) => {
    searchDetail.value.searchValue = route.query.text;
    searchList.value.forEach((item: object, index: number) => {
      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, `${searchDetail.value.searchValue}`);
  let user = searchList.value[index].userName.replaceAll(regExp, `${searchDetail.value.searchValue}`);
  let content = searchList.value[index].content.replaceAll(regExp, `${searchDetail.value.searchValue}`);
  document.querySelector(`.title${index}`).innerHTML = title;
  document.querySelector(`.user${index}`).innerHTML = user;
  document.querySelector(`.content${index}`).innerHTML = content;
};