JavaScript 文本高亮方法

Mark 一下

高亮一段文本

const reg = new RegExp(value, "g");
const data = e.map((item) => {
  const itemData = searchBibleData[item];
  const { verseText } = itemData;
  const highlight = verseText.replace(reg, `<mark>${value}</mark>`);
  return { ...itemData, highlight };
});

另一个方法

const targetString = appStore.searchValue;

if (result.length > 0) {
  for (let i = 0; i < result.length; i++) {
    const id = result[i];
    const { verseText } = searchBibleData[id];

    let highlight = "";

    // 递归替换
    for (let j = 0; j < verseText.length; j++) {
      const item = verseText[j];
      // 如果字符串包含其中一个字符，就替换加上 mark 标签
      if (targetString.includes(item)) {
        highlight += `<mark>${item}</mark>`;
      } else {
        highlight += item;
      }
    }
    // console.log(verseText);
    data.push({ ...searchBibleData[id], highlight });
  }
}