JavaScript文本高亮功能优化：解决多词匹配错误与精确分割策略

HTMLElement.prototype.realcar = function(word) {
  var el = this;
  const wordss = word.trim().sanitiza().split(" ").filter(word1 => word1.length > 2);
  const expr = new RegExp(wordss.join('|'), 'ig');
  // RegExpUNICO 用于累积所有匹配到的词语，最终构建用于split的正则表达式
  const RegExpUNICO = [...wordss]; // 初始包含搜索词

  const nodes = Array.from(el.childNodes);

  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];

    if (node.nodeType === 3) { // 文本节点
      const nodeValue = node.nodeValue;
      let matches = [];
      // 首次匹配，填充matches和RegExpUNICO
      while ((match = expr.exec((nodeValue).sanitiza())) !== null) {
        matches.push(match[0]);
        const palavrar = nodeValue.substring(match.index, match.index + match[0].length);
        RegExpUNICO.push(palavrar); // 将实际匹配到的词语也加入RegExpUNICO
      }

      // 构建用于split的正则表达式
      let expr0 = new RegExp(RegExpUNICO.join('|'), 'ig');

      if (matches) { // 问题点1: 即使matches为空数组，也为真
        const parts = nodeValue.split(expr0);

        for (let n = 0; n < parts.length; n++) {
          if (n) { // 处理匹配到的部分
            const xx = document.createElement("hightx");
            xx.style.border = '1px solid blue';
            xx.style.backgroundColor = '#ffea80';
            // 问题点2: 依赖indexOf定位，可能导致错误
            const startIndex = nodeValue.indexOf(parts[n - 1]) + parts[n - 1].length;
            const palavra = node.nodeValue.substr(startIndex, matches[n - 1].length);
            xx.appendChild(document.createTextNode(palavra));
            el.insertBefore(xx, node);
          }

          if (parts[n]) { // 处理非匹配部分
            el.insertBefore(document.createTextNode(parts[n]), node);
          }
        }
        el.removeChild(node); // 移除原始文本节点
      }
    } else {
      node.realcar(word); // 递归处理子节点
    }
  }
}

if (matches.length) { // 修正1: 确保有匹配项才执行
    // 将expr0的创建移至此处，并添加捕获组
    // RegExpUNICO 此时应已包含所有需要高亮的词语
    const expr00 = "(" + RegExpUNICO.join('|') + ")"; // 修正2: 添加括号创建捕获组
    const expr0 = new RegExp(expr00, 'ig');
    const parts = nodeValue.split(expr0); // 修正3: split结果包含匹配项

    for (let n = 0; n < parts.length; n++) {
        const textNode = document.createTextNode(parts[n]);
        if (n % 2) { // 修正4: 奇数索引为匹配项，需要高亮
            const xx = document.createElement("hightx");
            xx.style.border = '1px solid blue';
            xx.style.backgroundColor = '#ffea80';
            // 修正5: 直接使用parts[n]作为高亮文本，无需复杂定位
            xx.appendChild(textNode);
            el.insertBefore(xx, node);
        } else if (parts[n]) { // 偶数索引为非匹配项 (且非空)，直接插入
            el.insertBefore(textNode, node);
        }
    }
    el.removeChild(node); // 移除原始文本节点
}