javascript - 如何在不影响标记的情况下替换 html 文档中的文本？

Question

我如何编写一个 javascript/jquery 函数来替换 html 文档中的文本而不影响标记，只影响文本内容？

例如，如果我想在这里用“无样式”替换单词“样式”:

<tr>
<td style="width:300px">This TD has style</td>
<td style="width:300px">This TD has <span class="style100">style</span> too</td>
</tr>

我不希望替换影响标记，只是影响用户可见的文本内容。

Answer 1

您必须在文档中查找文本节点，我使用这样的递归函数:

function replaceText(oldText, newText, node){ 
  node = node || document.body; // base node 

  var childs = node.childNodes, i = 0;

  while(node = childs[i]){ 
    if (node.nodeType == 3){ // text node found, do the replacement
      if (node.textContent) {
        node.textContent = node.textContent.replace(oldText, newText);
      } else { // support to IE
        node.nodeValue = node.nodeValue.replace(oldText, newText);
      }
    } else { // not a text mode, look forward
      replaceText(oldText, newText, node); 
    } 
    i++; 
  } 
}

如果您这样做，您的标记和事件处理程序将保持不变。

编辑:更改代码以支持 IE，因为 IE 上的文本节点没有 textContent属性，在 IE 中你应该使用 nodeValue属性，它也没有实现 Node界面。

检查示例 here .