Question

If I have a block of text inside a div like:

<div id='t1'>
This is a great testing string.  Tomorrow grass is green.
</div>

and I want to replace all instance of the letter “g” with a link to google, like

<a href='www.google.com'>g</a>

Is it possible to do this with just Javascript/jquery?

Answer 1

If you want to perform a simple string replacement, the following will do:

var div = document.getElementById("t1");
div.innerHTML = div.innerHTML.replace(/g/g, "<a href='http://www.google.com'>g</a>");

If you need more dynamics, e.g. substituting a word with a link, depending on the value, use:

Example: Replace g or G with different URLs:

var div = document.getElementById("t1");
var mapper = {
    g: "http://www.google.com",
    G: "http://stackoverflow.com"
};
div.innerHTML = div.innerHTML.replace(/[Gg]/g, function(fullmatch){
    return "<a href='" + mapper[fullmatch] + "'>" + fullmatch + "</a>";
});