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

Question

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

例如,如果我想在这里用"no style"替换"style"这个词:

<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接口.

点击这里查看示例.