//关键句关键字的颜色先给个类,再根据这个类进行操作
<style>
.lgt_sen{
background-color: #35bc9b;
color: #fff;
}
.lgt_word{
color: #ff0000;
}
</style>
//几个按钮主要是用于测试几种情况(多句多字,多句单字,单句多字,单句单字)
<input type="button" id="btnTest" value="测试">
<input type="button" id="btnTest1" value="测试1">
<input type="button" id="btnTest2" value="测试2">
<input type="button" id="btnTest3" value="测试3">
<ul class="chat_ul">
<li><p>11122222233333333333333</p></li>
<li><p>fff4444433333333</p></li>
<li><p>你好,这是测试</p></li>
<li><p>hello</p></li>
<li><p>我定义了宽度中文换行了eeeeeeeeeeeeeeeee7</p></li>
<li><p>我定义了宽度中文换行了eeeeeeeeweee7</p></li>
</ul>
<script>
//这个函数是用来处理传过来的关键字和关键句
function formatFun(sen,words){
var strSen = sen.split("|"),strWords = words.split("|");//先把关键字句分割后放在数组
$(".lgt_sen").removeClass("lgt_sen");
$(".lgt_word").removeClass("lgt_word");
for(var i=0;i<strSen.length;i++){//各自循环
for(var j=0;j<strWords.length;j++){
posFun(strSen[i],strWords[j]);
}
}
}
//这个函数是用来定位到某一句某一字高亮
function posFun(sen,words){
var li = $(".chat_ul").find("li");
for(var i=0;i<li.length;i++){
if(sen==$(li[i]).find("p").text()){
$(li[i]).find("p").addClass("lgt_sen");
var html = $(li[i]).find("p").html();
var reg=new RegExp(words,'g');
html = html.replace(reg,'<span class="lgt_word">'+words+'</span>');
$(li[i]).find("p").html(html);
$(".chat_ul").scrollTop(par[i].offsetTop);
}
}
}
$("#btnTest").click(function(){
formatFun("11122222233333333333333|fff4444433333333","3");
})
$("#btnTest1").click(function(){
formatFun("你好,这是测试|hello","你好|hello");
})
$("#btnTest2").click(function(){
formatFun("我定义了宽度中文换行了eeeeeeeeeeeeeeeee7","了|文");
})
$("#btnTest3").click(function(){
formatFun("我定义了宽度中文换行了eeeeeeeeweee7","w");
})
</script>