Find all text nodes

Rahat Ahmed picture Rahat Ahmed · Feb 7, 2012 · Viewed 7.1k times · Source

I'm trying to write a bookmarklet that calls the function doSomething(textNode) on all instances of visible text on the document.

doSomething(), just for fun, replaces every word with "derp" by replacing the textContent of the textNode passed into it. However, this makes some textNodes that are empty to have words in them, so it breaks the web page.

Is there a way to call doSomething() on only every textNode that has words in it?

function recurse(element)
{
    if (element.childNodes.length > 0) 
        for (var i = 0; i < element.childNodes.length; i++) 
            recurse(element.childNodes[i]);

    if (element.nodeType == Node.TEXT_NODE && element.nodeValue != '') 
        doSomething(element);
}
var html = document.getElementsByTagName('html')[0];
recurse(html);

Answer

user1106925 picture user1106925 · Feb 7, 2012

Change this...

element.nodeValue != ''

to this...

/\S/.test(element.nodeValue)

This uses the /\S/ regex, which searches for at least one non-space character.

You may need to define further what you mean by "words". I took it to mean that you're only excluding whitespace-only nodes.


In browsers that support String.prototype.trim, this would be an alternative...

element.nodeValue.trim() != ''