javascript - 为什么 RegEx 输出转义文本而不是 HTML

Question

我正在编写一个 Chrome 扩展，它添加了 <span> ... </span>围绕与某个正则表达式匹配的每个字符串。正则表达式匹配工作完美，但我似乎找不到正确添加 span 的方法。在文本周围添加标签。

到目前为止我的代码是:

// main.js
var regex_pattern = new RegEx('(apple)', 'g'); // Let's pretend I want to match every instance of 'apple'
var textNodes = getTextNodes(); // A function that returns a list of every text node from the DOM
for (var i = 0; i < textNodes.length; i++) {
    if (textNodes[i].nodeValue.match(regex_pattern)) {
        textNodes[i].nodeValue = textNodes[i].nodeValue.replace(regex_pattern, "<span class='highlight'>$&</span>");
    }
}

这将正确识别我的正则表达式模式(在本例中为“apple”)的每个匹配项并输出 <span class="highlight">apple</span> 。唯一的问题是，Chrome 不会将其视为 HTML，而是将其视为文本 - 因此，我们看到的世界不是按照 highlight 设计的“apple”样式。类，我们会看到文字输出:<span class="highlight">apple<span>

为什么会发生这种情况？如何修复它以便正确应用样式？意识到这不太理想，我尝试使用 insertBefore()方法将匹配的文本包装在跨度中，但这没有执行任何操作，它会出错或无法添加 span节点，取决于我如何调整代码。感谢您提供的任何见解!

Answer 1

您不能使用 nodeValue 将文本节点替换为任意 HTML。

您必须手动执行此操作:

function replaceNodeWithHTML(node, html) {
  var parent = node.parentNode;
  if(!parent) return;
  var next = node.nextSibling;
  var parser = document.createElement('div');
  parser.innerHTML = html;
  while(parser.firstChild)
    parent.insertBefore(parser.firstChild, next);
  parent.removeChild(node);
}
var regex_pattern = /(apple)/g;
var textNodes = [document.querySelector('div').firstChild];
for (var i = 0; i < textNodes.length; i++)
  if (textNodes[i].nodeValue.match(regex_pattern))
    replaceNodeWithHTML(
      textNodes[i], 
      textNodes[i].nodeValue.replace(regex_pattern, "<span class='highlight'>$&</span>")
    );

.highlight {
  background: yellow;
}

<div>I have an (apple). You have an (apple) too.</div>

如果节点有 insertAdjacentHTML 会更容易方法，但只有元素可以。