Javascript 基于位置的文本高亮显示

我有一些带有文本和跨距（包括文本）的div。如果我知道高亮显示位置，如何将文本高亮显示到div中？ 我的意思是：

Lorem ipsum dolor amet

对于职位2和14：

<div>Lo<b>rem<span> ipsum</span> dol</b>or amet</div>

Lorem ipsum dolor amet

我能做这个简单吗？使用小而干净的代码。 谢谢

HTML

<div id='mydiv'>Lorem<span> ipsum</span> dolor amet</div>

Lorem ipsum dolor amet

JS/Jquery

var elm = $('#mydiv');
highlite(elm, 2, 28); //specify the start and end position
 // if you know the word you can find the index of word using indexOf/lastIndexOf

function highlite(element, startpos, endpos) {
    var rgxp = elm.html().substr(startpos,endpos)
    var repl = '<span class="myClass">' + rgxp + '</span>';
    elm.html(elm.html().replace(rgxp, repl));
}

var elm=$（'#mydiv'）；
highlite（elm，2,28）//指定起点和终点位置
//如果你知道这个词，你可以使用indexOf/lastIndexOf找到这个词的索引
功能highlite（元件、起始位置、结束位置）{
var rgxp=elm.html（）.substr（startpos，endpos）
var repl=''+rgxp+''；
html（elm.html（）.replace（rgxp，repl））；
}

演示

---

我知道射程。我为小时间内选择大数字范围寻求非常高性能的解决方案。范围是在每次迭代时重写DOM。我想优化它。

var elm = $('#mydiv');
highlite(elm, 2, 28); //specify the start and end position
 // if you know the word you can find the index of word using indexOf/lastIndexOf

function highlite(element, startpos, endpos) {
    var rgxp = elm.html().substr(startpos,endpos)
    var repl = '<span class="myClass">' + rgxp + '</span>';
    elm.html(elm.html().replace(rgxp, repl));
}