jQuery replace all occurrences of a string in an html page

Question

I'm working on a project where I need to replace all occurrences of a string with another string. However, I only want to replace the string if it is text. For example, I want to turn this...

<div id="container">
  <h1>Hi</h1>
  <h2 class="Hi">Test</h2>
  Hi
</div>

into...

<div id="container">
  <h1>Hello</h1>
  <h2 class="Hi">Test</h2>
  Hello
</div>

In that example all of the "Hi"s were turned into "Hello"s except for the "Hi" as the h2 class. I have tried...

$("#container").html( $("#container").html().replace( /Hi/g, "Hello" ) )

... but that replaces all occurrences of "Hi" in the html as well

Try it! This question will get you started: stackoverflow.com/questions/9178174/find-all-text-nodes — Jeremy J Starcher
– Jeremy J Starcher, Commented Aug 3, 2014 at 21:27

j08691 · Accepted Answer · 2014-08-03 21:48:09Z

19

This:

$("#container").contents().each(function () {
    if (this.nodeType === 3) this.nodeValue = $.trim($(this).text()).replace(/Hi/g, "Hello")
    if (this.nodeType === 1) $(this).html( $(this).html().replace(/Hi/g, "Hello") )
})

Produces this:

<div id="container">
    <h1>Hello</h1>
    <h2 class="Hi">Test</h2>
    Hello
</div>

jsFiddle example

answered Aug 3, 2014 at 21:48

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Browne Over a year ago

This doesn't work if there are nested HTML tags, e.g. <h2 class="Hi">Test <span class="Hi"></span></h2>

Cyril Jacquart · Accepted Answer · 2017-05-06 10:49:37Z

9

Nice results with:

function str_replace_all(string, str_find, str_replace){
try{
    return string.replace( new RegExp(str_find, "gi"), str_replace ) ;      
} catch(ex){return string;}}

and easier to remember...

edited May 6, 2017 at 10:49

answered May 7, 2015 at 9:15

Cyril Jacquart

2,7824 gold badges28 silver badges27 bronze badges

Comments

Saurabh Chandra Patel · Accepted Answer · 2015-11-21 05:48:54Z

8

 replacedstr = str.replace(/needtoreplace/gi, 'replacewith');

needtoreplace should not rounded by '

answered Nov 21, 2015 at 5:48

Saurabh Chandra Patel

13.7k7 gold badges94 silver badges80 bronze badges

Comments

Matt Browne · Accepted Answer · 2014-08-03 21:52:20Z

4

//Get all text nodes in a given container
//Source: http://stackoverflow.com/a/4399718/560114
function getTextNodesIn(node, includeWhitespaceNodes) {
    var textNodes = [], nonWhitespaceMatcher = /\S/;

    function getTextNodes(node) {
        if (node.nodeType == 3) {
            if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                textNodes.push(node);
            }
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                getTextNodes(node.childNodes[i]);
            }
        }
    }

    getTextNodes(node);
    return textNodes;
}

var textNodes = getTextNodesIn( $("#container")[0], false );
var i = textNodes.length;
var node;
while (i--) {
    node = textNodes[i];
    node.textContent = node.textContent.replace(/Hi/g, "Hello");
}

Note that this will also match words where "Hi" is only part of the word, e.g. "Hill". To match the whole word only, use /\bHi\b/g

edited Aug 3, 2014 at 21:52

answered Aug 3, 2014 at 21:39

Matt Browne

12.5k5 gold badges61 silver badges80 bronze badges

1 Comment

Xandor Over a year ago

This is by far one of the most under rated answers I have seen in a long time. It works extremely well even for running over the entire <body>

Amin Jafari · Accepted Answer · 2014-08-03 21:40:06Z

0

here you go => http://jsfiddle.net/c3w6X/1/

var children='';

$('#container').children().each(function(){
    $(this).html($(this).html().replace(/Hi/g,"Hello")); //change the text of the children

    children=children+$(this)[0].outerHTML; //copy the changed child
});
var theText=$('#container').clone().children().remove().end().text(); //get the text outside of the child in the root of the element

$('#container').html(''); //empty the container

$('#container').append(children+theText.replace(/Hi/g,"Hello")); //add the changed text of the root and the changed children to the already emptied element

answered Aug 3, 2014 at 21:40

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

4 Comments

Matt Browne Over a year ago

This doesn't work if there are nested HTML tags, e.g. <h2 class="Hi">Test <span class="Hi"></span></h2>

Matt Browne Over a year ago

In this particular example, but I think the OP was asking for a general solution. The example is probably a stripped-down version of his real HTML.

Amin Jafari Over a year ago

@MattBrowne you're right, j08691 's answer does it though

Matt Browne Over a year ago

No it doesn't actually...I'll make the same comment there.

Collectives™ on Stack Overflow

jQuery replace all occurrences of a string in an html page

5 Answers 5

1 Comment

Comments

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related