jQuery: replace() in html()

Question

How can I replace html parts with replace()?

<div>
    <a href="http://www.google.com">google.com</a>
</div>

JS:

var e = $("div"),
    fix = e.html().replace("google.com", "duckduckgo.com");
e.html(fix);

I guess html() is not working the same as text() ?

Test: http://jsfiddle.net/Hmhrd/

Answer 1

The problem is that .replace only replaces first occurence. If you want to replace all occurences, you must use a regular expression with a g (global) flag:

var e = $("div"),
    fix = e.html().replace(/google\.com/g, "duckduckgo.com");
e.html(fix);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <a href="http://www.google.com">google.com</a>
</div>

Demo

Remember you must escape special characters such as ., though. If you prefer, you can use

String.prototype.replaceAll = function(s1, s2) {
    return this.replace(
        new RegExp(  s1.replace(/[.^$*+?()[{\|]/g, '\\$&'),  'g'  ),
        s2
    );
};

var e = $("div"),
    fix = e.html().replaceAll('google.com', "duckduckgo.com");
e.html(fix);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
    <a href="http://www.google.com">google.com</a>
</div>

Demo