给关键字关键句高亮

//关键句关键字的颜色先给个类,再根据这个类进行操作

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值