Find all text nodes

2020-02-10 15:25发布

问题:

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);

回答1:

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() != ''