为什么 RegEx 输出转义文本而不是 HTML答案

【问题标题】：Why does RegEx output escaped text instead of HTML为什么 RegEx 输出转义文本而不是 HTML
【发布时间】：2016-07-15 06:06:21
【问题描述】：

我正在编写一个 Chrome 扩展程序，它在每个匹配某个正则表达式的字符串周围添加一个  ... 。正则表达式匹配完美，但我似乎无法找到在文本周围正确添加 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>");
    }
}

这将正确识别我的 RegEx 模式的每个匹配项（在本例中为“apple”）并输出 apple。唯一的问题是 Chrome 不会将其视为 HTML，而是将其视为文本 - 因此，不会看到根据 highlight 类设置样式的世界“苹果”，而是会看到文字输出：apple

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

【问题讨论】：

你需要使用createElement (developer.mozilla.org/en-US/docs/Web/API/Document/createElement)

标签： javascript regex google-chrome dom google-chrome-extension

【解决方案1】：

在元素上设置.innerHTML。设置 textNode.nodeValue 值直接设置文本。

【讨论】：

【解决方案2】：

您不能使用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;
}

&lt;div&gt;I have an (apple). You have an (apple) too.&lt;/div&gt;

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

【讨论】：