Replace all occurrences of a string in an element

Question

I want to replace a specific line in (text) with all descendant elements of this element.

innerHTML cannot be used because this sequence can be displayed in attributes. I tried using XPath, but it seems that the interface is essentially read-only. Since this is limited to one element, functions like document.getElementsByTagName cannot be used either.

Can anyone suggest any way to do this? Any jQuery or pure DOM method is acceptable.

Edit:

Some of the answers point to the problem I was trying to work with: changing the text directly on the element will delete all the non-text child nodes.

Thus, the problem basically boils down to how to efficiently select all Text nodes in the tree. In XPath, you can easily do this as //text() , but the current XPath interface does not allow you to modify these text nodes.

One way to do this is recursion, as shown in Bergi's answer . Another way is to use the jQuery find('*') selector, but it's a bit expensive. Still waiting to see if there are better solutions.

Answer 1

Just use a simple, self-made DOM iterator that recursively traverses all nodes:

 (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 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 

Answer 2

The solution may be to browse through all available nodes (including TextNodes) and apply the regexp template for the results. To capture TextNodes, you need to call jQuerys .contents() . For example:

 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') ); }); 

Example: http://jsfiddle.net/h8Rxu/3/

Link: .contents()

Answer 3

Sorry, I just got it myself:

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

I used toUpperCase () here to make the result more obvious, but any String operation would be valid there.

Answer 4

Using jQuery:

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

If you prefer to search through all children, not just the children themselves, use .find() instead.

http://jsfiddle.net/ExwDx/

Edit: Documentation for children , each , text and find .