JSFiddle - React, Tailwind, and code Playground

by voideanvalue

HTML

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

JavaScript

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

	while (true) {
    if (node.nodeType === 3) {
    	text += node.nodeValue;
    }
    if (node === b) {
    	break;
    }
    if (node.firstChild) {
      node = node.firstChild;
      continue;
    }
    if (node.nextSibling) {
      node = node.nextSibling;
      continue;
    }
    let parent = node.parentNode;
    while (!parent.nextSibling) {
    	parent = parent.parentNode;
    }
    node = parent.nextSibling;
  }

  return text;
}

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