js怎么实现文字高亮搜索 关键词高亮匹配与定位技巧

function highlightText(elementId, keyword) {
  const element = document.getElementById(elementId);
  const text = element.innerHTML;
  if (!keyword) {
    element.innerHTML = text; // 清除高亮
    return;
  }

  const escapedKeyword = keyword.replace(/[-/\^$*+?.()|[]{}]/g, '\$&'); // 转义特殊字符
  const regex = new RegExp(escapedKeyword, 'gi');
  const highlightedText = text.replace(regex, '<mark>$&</mark>');
  element.innerHTML = highlightedText;

  // 定位到第一个高亮关键词
  const firstHighlight = element.querySelector('mark');
  if (firstHighlight) {
    firstHighlight.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

// 示例用法
const keyword = 'JavaScript'; // 假设用户输入了JavaScript
highlightText('myContent', keyword); // 'myContent' 是包含文本的元素的ID

function highlightTextRecursive(element, keyword) {
  if (!keyword) {
    // 清除高亮
    const marks = element.querySelectorAll('mark');
    marks.forEach(mark => {
      mark.outerHTML = mark.innerHTML;
    });
    return;
  }

  const escapedKeyword = keyword.replace(/[-/\^$*+?.()|[]{}]/g, '\$&');
  const regex = new RegExp(escapedKeyword, 'gi');

  function replaceText(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.nodeValue;
      const highlightedText = text.replace(regex, '<mark>$&</mark>');
      if (highlightedText !== text) {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = highlightedText;

        // 将新节点插入到原始节点之前，并删除原始节点
        while (tempDiv.firstChild) {
          node.parentNode.insertBefore(tempDiv.firstChild, node);
        }
        node.parentNode.removeChild(node);
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // 递归遍历子节点
      for (let i = 0; i < node.childNodes.length; i++) {
        replaceText(node.childNodes[i]);
      }
    }
  }

  replaceText(element);

    // 定位到第一个高亮关键词
  const firstHighlight = element.querySelector('mark');
  if (firstHighlight) {
    firstHighlight.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

// 示例用法
const keyword = 'JavaScript';
const element = document.getElementById('myContent');
highlightTextRecursive(element, keyword);

function highlightMultipleKeywords(elementId, keywords) {
  const element = document.getElementById(elementId);
  let text = element.innerHTML;

  // 清除之前的高亮
  element.innerHTML = text;

  keywords.forEach(keyword => {
    if (keyword) { // 确保关键词不为空
      const escapedKeyword = keyword.replace(/[-/\^$*+?.()|[]{}]/g, '\$&');
      const regex = new RegExp(escapedKeyword, 'gi');
      text = text.replace(regex, '<mark>$&</mark>');
    }
  });

  element.innerHTML = text;

      // 定位到第一个高亮关键词
  const firstHighlight = element.querySelector('mark');
  if (firstHighlight) {
    firstHighlight.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

// 示例用法
const keywords = ['JavaScript', '高亮', '搜索'];
highlightMultipleKeywords('myContent', keywords);

mark {
  background-color: yellow;
  color: black;
  font-weight: bold;
}