XPath 式でテキストノードを得る
HTML
<div id="sample">
<p>JavaScript<span>test</span>JavaScript<span>JavaScript</span>test<span>test</span>JavaScript<span>test</span>JavaScript</p>
<p>JavaScript<span>test</span>JavaScript<span>JavaScript</span>test<span>test</span>JavaScript<span>test</span>JavaScript</p>
</div>
JavaScript
'use strict';
function getTextNodes1 (contextNode, data) {
var doc = contextNode.nodeType === Node.DOCUMENT_NODE ? contextNode : contextNode.ownerDocument,
xpathResult = doc.evaluate('descendant::text()[.="' + data + '"]', contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
i = 0,
l = xpathResult.snapshotLength,
textNodes = [],
textNode;
while (i < l) {
textNode = xpathResult.snapshotItem(i++);
textNodes.push(textNode);
}
return textNodes;
}
function getTextNodes2 (contextNode, data) {
function filter (textNode) {
return textNode.data === data ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
var doc = contextNode.nodeType === Node.DOCUMENT_NODE ? contextNode : contextNode.ownerDocument,
treeWalker = doc.createTreeWalker(contextNode, NodeFilter.SHOW_TEXT, filter, false),
textNodes = [];
while (treeWalker.nextNode()) {
textNodes.push(treeWalker.currentNode);
}
return textNodes;
}
function textNodeToString (textNodes) {
return textNodes.map(function (node) { return node.data; });
}
console.log(getTextNodes1(document.getElementById('sample'), 'JavaScript'));
console.log(getTextNodes2(document.getElementById('sample'), 'JavaScript'));
console.log(textNodeToString(getTextNodes1(document.getElementById('sample'), 'JavaScript'))); // ["JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript"]
console.log(textNodeToString(getTextNodes2(document.getElementById('sample'), 'JavaScript'))); // ["JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript", "JavaScript"]