替换元素中字符串的所有ocurrance

我想替换给定元素的所有后代元素(的文本)中的特定字符串。

innerHTML不能用,因为这个序列可以出现在属性中。 我尝试过使用XPath,但看起来界面基本上是只读的。 因为这仅限于一个元素,所以也不能使用document.getElementsByTagName函数。

有没有建议任何方法这样做? 任何jQuery或纯DOM方法都是可以接受的。

编辑:

一些答案表明我试图解决的问题:直接在元素上修改文本将导致所有非Text子节点被删除。

所以问题主要归结为如何有效地选择树中的所有Text节点。 在XPath中,您可以轻松地将其作为//text() ,但当前的XPath接口不允许您更改这些Text节点。

一种方法是通过递归,如Bergi的答案所示。 另一种方法是使用jQuery的find('*')选择器,但这有点贵。 还在等着看是否有更好的解决方案。

只需使用一个简单的自制DOM迭代器,它在所有节点上递归遍历:

 (function iterate_node(node) { if (node.nodeType === 3) { // Node.TEXT_NODE var text = node.data.replace(/any regular expression/g, "any replacement"); if (text != node.data) // there's a Safari bug node.data = text; } else if (node.nodeType === 1) { // Node.ELEMENT_NODE for (var i = 0; i < node.childNodes.length; i++) { iterate_node(node.childNodes[i]); // run recursive on DOM } } })(content); // any dom node 

解决方案可能是浏览所有可用节点(包括TextNodes)并对结果应用正则表达式模式。 要同时获取TextNodes,您需要调用jQuerys .contents() 。 例如:

 var search = "foo", replaceWith = 'bar', pattern = new RegExp( search, 'g' ); function searchReplace( root ) { $( root ).contents().each(function _repl( _, node ) { if( node.nodeType === 3 ) node.nodeValue = node.nodeValue.replace( pattern, replaceWith ); else searchReplace( node ); }); } $('#apply').on('click', function() { searchReplace( document.getElementById('rootNode') ); }); 

示例: http : //jsfiddle.net/h8Rxu/3/

参考: .contents()

使用jQuery:

 $('#parent').children().each(function () { var that = $(this); that.text(that.text().replace('test', 'foo')); }); 

如果您希望搜索所有子项而不是直接子项,请改用.find()

http://jsfiddle.net/ExwDx/

编辑: 儿童 , 每个 , 文本和查找的文档。

对不起,我自己搞定了:

 $('#id').find('*').each(function(){ $.each(this.childNodes, function() { if (this.nodeType === 3) { this.data = this.data.toUpperCase(); } }) }) 

我在这里使用了toUcapCase()来使结果更加明显,但任何String操作在那里都是有效的。