javascript - How can I make a range selection on element after inline bold tags? -

i have tried can think of, life of me can't programmatically select text after bold tag. have tried setstart on of 3 nodes in childnodes array, still won't work.

can explain need work?

<div class = "tr" id = "data">      text <b>bold</b> should be. </div>  <button onclick="makeselection(1,10);">selection before bold</button> <button onclick="makeselection(35,38);">selection after bold</button> 

and js:

function makeselection(start, end) { var parent = document.getelementbyid('data');  var range = document.createrange();         range.setstart(parent.childnodes[0], start);         range.setend(parent.childnodes[0], end);          var sel = window.getselection();         sel.removeallranges();         sel.addrange(range);   } 

jsfiddle

thanks!

not entirely sure if wanted pass childnode index part of function call?

<div class = "tr" id = "data">  text <b>bold</b> should be. </div>  <button onclick="makeselection(1,18, 0);">selection before bold</button> <button onclick="makeselection(1,23, 2);">selection after bold</button> 

and change script use variable:

function makeselection(start, end, child) { var parent = document.getelementbyid('data');  var range = document.createrange();     range.setstart(parent.childnodes[child], start);     range.setend(parent.childnodes[child], end);      var sel = window.getselection();     sel.removeallranges();     sel.addrange(range);  } 

as current code stands never able reach 35th - 38th position still in first child node. calling search node , receive out of bounds exception first node 19 chars long.