将文本节点替换为 HTML 跨度内容答案

【问题标题】：Replace Text Node with HTML span content将文本节点替换为 HTML 跨度内容
【发布时间】：2018-02-28 13:21:16
【问题描述】：

我应该写一个可以改变网页中单词颜色的扩展，这个代码可以替换单词但不能改变它们的背景颜色

见下面的代码： content.js

walk(document.body);

function walk(node)  
{

    var child, next;

    switch ( node.nodeType )  
    {
        case 1: 
        case 9:  
        case 11: 
            child = node.firstChild;
            while ( child ) 
            {
                next = child.nextSibling; 
                walk(child);
                child = next;
            }
            break;

        case 3: 
            handleText(node);
            break;
    }
}

function handleText(textNode) 
{
    var v = textNode.nodeValue;

    v = v.replace(/Apple/gi, '<span class="red">Pineapple</span>');

    textNode.nodeValue = v;
}

菠萝怎么申请？

【问题讨论】：

不清楚您在这里问什么，请参考Ask New Question并正确提出您的问题
@bRIMOs 我改变了问题
不确定您的问题。你的文件中有一个名为 red 的类吗？如果没有，则创建它，否则直接在此处申请，如Pineapple

标签： javascript jquery html regex google-chrome-extension

【解决方案1】：

因为您访问的是 TextNode 而不是 HTML 节点，所以替换的文本将是文本并且不会被解析为 html

所以只需以 Html 节点 (node.nodeType == 1) Node.ELEMENT_NODE 访问您的元素（参见 doc ），然后获取它的 innerHTML 并用新的 innerHTML 替换它

见下面的片段：

walk(document.body);

function walk(node) {

  var child, next;
  switch (node.nodeType) {

    case 1:
      handleText(node);
      break;
    case 9:
    case 11:
      child = node.firstChild;
      while (child) {
        next = child.nextSibling;
        walk(child);
        child = next;
      }
      break;

    case 3:
      break;
  }
}

function handleText(node) {
  var v = node.innerHTML;
  v = v.replace(/Apple/gi, '<span class="red">Pineapple</span>');
  node.innerHTML = v;
}

.red {
  color: red;
  font-weight: bold;
}

<div>
  Apple dsqd sqd qsd Apple sqd sqd Apple
  <p>Apple is an apple and it's an apple </p>
  <p><span>Apple also is an PeanApple</span></p>
  <div>
    what you think about
    <p>
      Apple now !
    </p>
  </div>
</div>

还有Fiddle

【讨论】：

这很好用，除了 htmlnode 中的属性也会被替换。 This is an Apple。您将如何防止这种情况发生？
嗯，再想想，这只是一次解析整个 BODY 元素，而不是解析每个单独的 DOM 元素。
@Kokodoko 你说得对，我会尝试寻找其他解决方案！

【解决方案2】：

如果您将 HTML 放入 nodeValue 中，它将被转义。试试：

textNode.parentElement.innerHTML = 'This <strong>accepts</strong> HTML';

【讨论】：

+我不能 :(我的声誉 11 当我得到 15 我赞成你的评论）