基于位置的文本突出显示 [英] Text highlighting based on positions
本文介绍了基于位置的文本突出显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一些带有文本和跨度的 div(包括文本).如果我知道突出显示位置,如何将文本突出显示到 div 中?我的意思是:
Loremipsumdolor amet
对于位置 2 和 14:
Lorem;ipsumdol</b>或amet</div>我能做到这么简单吗?使用小而干净的代码.谢谢
解决方案 HTML
Loremipsumdolor amet
JS/Jquery
var elm = $('#mydiv');highlite(榆树, 2, 28);//指定开始和结束位置//如果你知道这个词,你可以使用 indexOf/lastIndexOf 找到这个词的索引函数highlite(元素,startpos,endpos){var rgxp = elm.html().substr(startpos,endpos)var repl = ''+ rgxp + '</span>';elm.html(elm.html().replace(rgxp, repl));}
演示
http://jsfiddle.net/raunakkathuria/sD2pX/
I have some div with text and spans (include text). How I can highlight text into div if I know highlight positions?
I mean:
<div>Lorem<span> ipsum</span> dolor amet</div>
for positions 2 and 14:
<div>Lo<b>rem<span> ipsum</span> dol</b>or amet</div>
I can do this simple? With small and clean code.
Thank you
解决方案 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));
}
Demo
http://jsfiddle.net/raunakkathuria/sD2pX/
这篇关于基于位置的文本突出显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文