[Edit]

JavaScript - find all text nodes on web page

1 contributors

2 contributions

0 discussions

0 points

Created by:

Adnaan-Robin

724

In this article, we would like to show you how to find all text nodes on web page using JavaScript.

Practical example

Edit

In this example, we create a reusable arrow function that walks through all text nodes of the passed node element applying filter function to them. In usage example section we also create filter that excludes all empty text nodes. At the end, we call the walkTextNodes() function on window load event.

xxxxxxxxxx
 
<!doctype html>
<html>
<body>
  <h1>Header</h1>
  <div>Div</div>
  <script>
​
    function walkTextNodes(node, filter) {
        var result = [];
        function execute (node) {
            var child = node.firstChild;
            while (child) {
                switch (child.nodeType) {
                    case Node.TEXT_NODE:
                        if (filter(child)) {
                            result.push(child);
                        }
                        break;
                    case Node.ELEMENT_NODE:
                        execute(child);
                        break;
                }
                child = child.nextSibling;
            }
        }
        if (node) {
            execute(node);
        }
        return result;
    }
​
​
    // Usage example:
​
    var container = document.body;
​
    function filter(node) { // this filter removes text nodes that contains white characters only
        return /^(\s|\n)+$/gi.test(node.data) ? false : true;
    };
    
    window.addEventListener('load', function() {
        var nodes = walkTextNodes(container, filter);
        for (var i = 0; i < nodes.length; ++i) {
            console.log(nodes[i].data);
        }
    });
​
  </script>
  <p>Paragraph</p>
  <span>Span</span>
</body>
</html>

Auto running

Note:

The walkTextNodes() function needs to be executed after window load event or at the end of the script to make sure that all elements are loaded before the function execution.