JSFiddle - React, Tailwind, and code Playground

by Ttt Yyy

HTML

<div>
  <div>
    some stuff before
    <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>
  <br />
  <div id="console" />

JavaScript

function getPath(a) {
  var path = [];
  while (a !== null) {
    path.push(a);
    a = a.parentNode;
  }
  path.reverse();
  return path;
}

function getHighlightedText(a, b) {
  var text = '';

  var passedA = false;
  var passedB = false;

  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];
  }

  function traverse(node, aPathIndex) {
    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) {
      if (passedA || aPath[aPathIndex] === child) {
         traverse(child, aPathIndex + 1);
       }
        child = child.nextSibling;
    }
  }

  traverse(lca, i);

  return text;
}

document.getElementById('console').innerHTML = 'Result: ' + 
  getHighlightedText(
    document.getElementById('start').firstChild,
    document.getElementById('end').firstChild
  );