Replacing all urls in a div

Question

I am trying to write javascript code to find all the urls inside a div. Now this would be pretty easy if all the urls within the div were separated by spaces in which case I can just do a regex on what's inside the div to find them. However, the urls within this outer div may be in sub divs (or any other html tag) and I want to consider the subdivs as separators as well (and I don't want to get rid of these subdivs). To give an example, in the following I want to find www.foo.com and www.bar.com within the div with id "outer":

<div id="outer"><div>www.foo.com</div>www.bar.com</div>

What would be a good way of doing this?

Answer 1

You can apply a recursive call to all non-text child nodes.

function replaceWwwInNodes(node) {
    //text node
    if (node.nodeType === 3) {
        node.textContent = node.textContent.replace(/* ??? */)
    }
    else {
        Array.prototype.forEach.call(node.childNodes, function (elem) {
            replaceWwwInNodes(elem);
        });
    }
}

replaceWwwInNodes(document.getElementById('outer'));

http://jsfiddle.net/UDX5V/