基于位置的文本突出显示

时间:2013-12-23 21:48:17

标签: javascript range wysiwyg

我有一些带文本和跨度的div(包括文本)。如果我知道高亮位置,我如何将文本突出显示为div? 我的意思是:

<div>Lorem<span> ipsum</span> dolor amet</div>

对于第2和第14位:

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

我能做到这么简单吗?代码小而干净。 谢谢

1 个答案:

答案 0 :(得分:0)

<强> HTML

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

<强> 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));
}

<强>演示

http://jsfiddle.net/raunakkathuria/sD2pX/

相关问题