javascript - Highlight text in HTML by int offset (start-end) without knowing actual textNodes -

i need highlight text in html, given start , end position (integers, example 600th 712th character).

i able using range.setstart(startnode, startoffset) , range.setend(endnode, endoffset), works if know startnode , endnode, textnodes, inside shallow element.

is possible highlight text without knowing these nodes ?
if not, optimal solution determine start , end nodes ? 1 solution go through dom , count characters...

you can use treewalker textnodes main div , go through textcontent's length determine start , end points should :

var maindiv = document.getelementbyid('main');  // create treewalker accept textnodes  var treewalker = document.createtreewalker(maindiv,nodefilter.show_text,null,false);  // array containing our textnodes  var textnodelist = [];  while(treewalker.nextnode()) textnodelist.push(treewalker.currentnode);    function getrangefromint(start, end){    var indexsizeerror = 'indexsizeerror: index or size negative or greater allowed amount';    if(start>end||start<0){console.warn(indexsizeerror); return null;}        var length = 0;    var startnode, endnode, current=0,    startpos, endpos;      while(length<=end){      // we'been far ? return      if(current>=textnodelist.length){console.warn(indexsizeerror); return null;}      // add length of current node our total length      length+=textnodelist[current].textcontent.length;      // start less actual total length ?      if(start<length && !startnode){        // our startnode here        startpos = start-(length-textnodelist[current].textcontent.length);        startnode = textnodelist[current];        }      // same end      if(end<length && !endnode){        endpos = end-(length-textnodelist[current].textcontent.length);        endnode = textnodelist[current];        }        current++;      }      var range = document.createrange();    range.setstart(startnode, startpos);    range.setend(endnode, endpos);      var selection = window.getselection();    selection.removeallranges();    selection.addrange(range);    return selection;    }    var log = document.getelementbyid('log');  document.queryselector('button').addeventlistener('click', function(){    log.innerhtml = getrangefromint(      this.previouselementsibling.previouselementsibling.value,      this.previouselementsibling.value);    },false);

p{font-size:.7em}  #log{color: rgba(0,0,0,.7); border:1px solid; position: absolute; font-size:.5em;}

<input placeholder="start"/><input placeholder="end"/><button>getrange</button>  <div id="main"><p>  lorem ipsum dolor sit amet, consectetur adipiscing elit. proin vel sodales odio. nunc nisi blandit, gravida augue quis, tristique ante. aliquam in sem @ tellus tincidunt ornare. mauris ut scelerisque sapien. pellentesque dignissim erat enim, vestibulum molestie diam ultrices eget. nullam semper leo sit amet ante porttitor, vel tincidunt lorem   </p>  <p>  nam pellentesque id nulla @ venenatis. integer arcu nisi, suscipit sit amet here neque ac, hendrerit finibus nisl. morbi quis volutpat libero. pellentesque in sapien eu magna finibus tempor. aliquam posuere ornare dolor, vel maximus felis tincidunt vel. curabitur ac risus ut augue   </p>  <p>  pellentesque sollicitudin risus eu mi sollicitudin maximus eu @ turpis. here nunc iaculis tellus neque, in sollicitudin diam sollicitudin nec. donec vitae urna nec nibh pharetra pulvinar. proin eget dolor id quam porta   </p>  <p>  suspendisse malesuada, elit blandit efficitur, mi sem molestie orci, @ vulputate here erat diam quis mi. mauris feugiat faucibus semper. nulla tempor et velit quis interdum. proin tincidunt lacus ut lacus auctor scelerisque. aliquam pharetra risus laoreet nulla commodo, @ eleifend ipsum dapibus. pellentesque dignissim congue diam, fermentum diam   </p></div>  <p id="log"></p>