Run results for: TreeWalker

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Browser: Chrome 94

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Better Solution	358983.7 Ops/sec
Optimal Solution	586655.1 Ops/sec
TreeWalker	414573.8 Ops/sec
TreeWalker with LCA	312832.8 Ops/sec
Creative Solution	204264.8 Ops/sec

HTML Preparation code:

<div>
  <span id="start"> Hello </span>
  <div>
    <img src="http://placehold.it/100x75" />
  </div>
  <div>
    <span> include me </span>
  </div>
  <span id="end">World</span>
  <span>don't include me</span>
</div>

Tests:

Better Solution
function getPath(a) { var path = []; while (a !== null) { path.push(a); a = a.parentNode; } path.reverse(); return path; } function getLCA(a,b) { var aPath = getPath(a); var bPath = getPath(b); var lca; for (var i = 0; i < aPath.length && aPath[i] === bPath[i]; i++) { lca = aPath[i]; } return lca; } function getHighlightedText(a, b) { var passedA = false; var passedB = false; var text = ''; var lca = getLCA(a,b); function traverse(node) { if (node === a) { passedA = true; } if (passedA && node.nodeType === 3) { text += node.nodeValue; } if (node === b) { passedB = true; return; } var child = node.firstChild; while (child !== null && !passedB) { traverse(child); child = child.nextSibling; } } traverse(lca); return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
Optimal Solution
function getHighlightedText(a, b) { var text = a.nodeValue; var cur = a; while (cur !== b) { if (cur.firstChild !== null) { cur = cur.firstChild; } else { while (cur.nextSibling === null) { cur = cur.parentNode; } cur = cur.nextSibling; } if (cur.nodeType === 3) { text += cur.nodeValue; } } return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
TreeWalker
function getHighlightedText(a, b) { var passedA = false; var text = ''; const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT ); while (treeWalker.nextNode()) { const node = treeWalker.currentNode; if (node === a) { passedA = true; } if (passedA) { text += node.nodeValue; } if (node === b) { break; } } return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
TreeWalker with LCA
function getPath(a) { var path = []; while (a !== null) { path.push(a); a = a.parentNode; } path.reverse(); return path; } function getLCA(a,b) { var aPath = getPath(a); var bPath = getPath(b); var lca; for (var i = 0; i < aPath.length && aPath[i] === bPath[i]; i++) { lca = aPath[i]; } return lca; } function getHighlightedText(a, b) { var passedA = false; var text = ''; var lca = getLCA(a,b); const treeWalker = document.createTreeWalker( lca, NodeFilter.SHOW_TEXT ); while (treeWalker.nextNode()) { const node = treeWalker.currentNode; if (node === a) { passedA = true; } if (passedA) { text += node.nodeValue; } if (node === b) { break; } } return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
Creative Solution
function getHighlightedText(a, b) { var all = document.getElementsByTagName('*'); var filtered = ""; var aPassed = false; for (var i = 0; i < all.length; i++) { var elem = all[i]; if (elem.firstChild === a) { aPassed = true; } if (elem.firstChild && elem.firstChild.nodeType === 3 && aPassed) { filtered += elem.firstChild.nodeValue; } if (elem.firstChild == b) { break; } }; return filtered; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );

Run results for: TreeWalker

Better Solution

Optimal Solution

TreeWalker

TreeWalker with LCA

Creative Solution