JSFiddle - React, Tailwind, and code Playground

HTML

<div id="span">bar;foo</div>
<button onclick="range()">Range.expand</button>
<button onclick="sel()">Selection.modify</button>
<div id="log"></div>

JavaScript

range = function() {
   var range = document.createRange();
   var text = document.getElementById("span").innerText;
   var div = document.getElementById('log');
   div.innerText = "";
   for(var i=0;i<text.length;i++) { 
   	range.setStart(span.firstChild, i);
    range.setEnd(span.firstChild, i);
    range.expand("word");
    div.innerText += range.toString();
    div.innerText += '\n';
   }
 }
 
 sel = function() {
 var selection = getSelection();
 var text = document.getElementById("span").innerText;
 var div = document.getElementById('log');
 div.innerText = "";
 for(var i=0;i<text.length;i++) {
    selection.collapse(span.firstChild,i);
  	selection.modify("move","forward","word");
  	selection.modify("extend","backward", "word");
    div.innerText += selection.getRangeAt(0).toString();
    div.innerText += '\n';
  }
 }