Find all text nodes in HTML page
html, javascript
Solution
Using `createTreeWalker` is a very efficient way of querying multiple nodes from the DOM.
/**
* Retrieves an array of all text nodes under a given element.
*
* @param { Node } el - The element under which to search for text nodes.
* @returns { Node[] } An array of text nodes found under the given element.
*/
function textNodesUnder(el) {
const children = [] // Type: Node[]
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT)
while(walker.nextNode()) {
children.push(walker.currentNode)
}
return children
}
Note: A much more complete answer with multiple examples can be found here: getElementsByTagName() equivalent for textNodes
Problem
For this question I needed to find all text nodes under a particular node. I can do this like so: ``` function textNodesUnder(root){ var textNodes = []; addTextNodes(root); [].forEach.call(root.querySelectorAll('*'),addTextNodes); return textNodes; function addTextNodes(el){ textNodes = textNodes.concat( [].filter.call(el.childNodes,function(k){ return k.nodeType==Node.TEXT_NODE; }) ); } } ``` However, this seems inelegant in light of the fact that with XPath one could simply query for `.//text()` and be done with it. What's the simplest way to get all text nodes under a particular element in an HTML document, that works on IE9+, Safari5+, Chrome19+, Firefox12+, Opera11+? "Simplest" is defined loosely as "efficient and short, without golfing".