原生JS实现关键词高亮时如何保留匹配词前后空格不丢失

现有实现出现空格丢失的核心原因有两个：

• 直接拼接、重写innerHTML的逻辑会触发浏览器对容器内部HTML的全量重新解析，当插入的高亮标签与相邻空格共存时，在display:flex布局上下文下容易出现空白字符异常折叠；如果多次调用高亮函数，匹配逻辑还会误命中已插入的<span>标签的属性、标签名，直接破坏DOM结构，进一步导致空格、文本显示错乱。
• 现有逻辑没有做旧高亮重置，重复执行时会出现标签多层嵌套问题，也没有处理单节点内多匹配项的场景。

放弃直接操作innerHTML的实现思路，改为遍历容器内所有纯文本节点做匹配替换，全程不直接拼接HTML字符串，从根源避免结构破坏和空格丢失问题，修复后代码兼容关键词前后带空格的场景，也支持多次调用、容器内嵌套其他标签的场景。

修复后完整代码 #

JS逻辑 #

function highlight(text) {
  if (!text) return;
  const matchKey = text.toUpperCase();
  const containers = document.querySelectorAll('.item-question-faq');

  for (const container of containers) {
    // 先清除历史高亮，避免标签嵌套
    const oldHighlight = container.querySelectorAll('.highlight');
    oldHighlight.forEach(span => {
      const textNode = document.createTextNode(span.textContent);
      span.replaceWith(textNode);
    });

    // 抓取容器内所有纯文本节点，排除标签、属性内容
    const nodeWalker = document.createTreeWalker(
      container,
      NodeFilter.SHOW_TEXT,
      null
    );
    const textNodeList = [];
    let currentNode;
    while (currentNode = nodeWalker.nextNode()) {
      textNodeList.push(currentNode);
    }

    // 逐个处理文本节点，保留所有原始字符（含空格）
    for (const textNode of textNodeList) {
      const originText = textNode.textContent;
      const originTextUpper = originText.toUpperCase();
      let matchIndex = originTextUpper.indexOf(matchKey);
      if (matchIndex === -1) continue;

      const nodeFragment = document.createDocumentFragment();
      let lastCutIndex = 0;
      // 处理当前节点内所有匹配项
      while (matchIndex !== -1) {
        // 插入匹配段前的普通文本，完整保留空格
        if (matchIndex > lastCutIndex) {
          nodeFragment.appendChild(
            document.createTextNode(originText.slice(lastCutIndex, matchIndex))
          );
        }
        // 插入高亮标签
        const highlightSpan = document.createElement('span');
        highlightSpan.className = 'highlight';
        highlightSpan.textContent = originText.slice(matchIndex, matchIndex + text.length);
        nodeFragment.appendChild(highlightSpan);

        lastCutIndex = matchIndex + text.length;
        matchIndex = originTextUpper.indexOf(matchKey, lastCutIndex);
      }
      // 插入剩余的普通文本
      if (lastCutIndex < originText.length) {
        nodeFragment.appendChild(
          document.createTextNode(originText.slice(lastCutIndex))
        );
      }
      // 替换原文本节点，无HTML解析过程，不会丢失空格
      textNode.replaceWith(nodeFragment);
    }
  }
}

document.body.onload = function() {
  highlight('order');
  // 测试带空格的关键词可直接传参，例如 highlight(' order ')
};

CSS样式（原有逻辑无需修改，可直接复用） #

.item-question-faq {
  display: flex;
  margin-left: 5px;
  align-items: center;
  font-size: 14px;
  margin-left: 3px;
  margin-right: 3px;
}
.highlight {
  background: yellow;
  /* 可选：如果仍有布局错位可打开下面这行，强制span保持行内特性 */
  /* display: inline; white-space: inherit; */
}

HTML测试代码（原有逻辑无需修改） #

<p class="item-question-faq webrep-faq">the order is important</p>

• 所有文本内容通过DOM API创建文本节点插入，没有HTML字符串解析过程，所有空格、特殊字符都会100%保留，哪怕关键词前后带空格也不会出现吞空格问题。
• 匹配逻辑仅处理纯文本节点，不会误命中标签名、class属性等内容，不会破坏原有DOM结构。
• 自带历史高亮清除逻辑，支持多次调用、动态修改搜索词的场景，不会出现标签冗余嵌套。
• 支持单个文本节点内多匹配项高亮，也兼容容器内嵌套其他行内标签（如<strong>、<em>）的场景。

内容的提问来源于stack exchange，提问作者Christian Guimarães