jQuery段落文字查找高亮

使用方法：

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代碼

<div class="container">
    <div class="row">
        <div style="height: 100px;"></div>
        <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">jQuery之美-指定內(nèi)容高亮</div>
                <div class="panel-body">
                    <div>
                        <p class="text-primary">測(cè)試文本：</p>
                        <div id="testHtml">
                            <ul>
                                <li>姓名：浪哥</li>
                                <li>工作崗位：WEB前端工程師</li>
                                <li>工作經(jīng)驗(yàn)：6年</li>
                                <li>在校專(zhuān)業(yè)：軟件工程(信息工程系)</li>
                                <li>知識(shí)技能：HTML5，CSS3，js，es6，Node.js，jQuery，Vue.js，小程序,Dcloud，APICloud，能手寫(xiě)響應(yīng)式布局、彈性布局框架</li>
                                <li>在校所學(xué)科目：C，JAVA，C#，ASP.NET，MYSQL，SQL server，數(shù)據(jù)結(jié)構(gòu)，軟件測(cè)試，軟件工程，軟件架構(gòu)，計(jì)算機(jī)操作系統(tǒng)</li>
                                <li>掌握框架：Bootstrap，layui，Element UI</li>
                                <li>自我評(píng)價(jià)：具有良好的團(tuán)隊(duì)意識(shí)</li>
                                <li>聯(lián)系QQ：5564647856</li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <p class="text-primary">體驗(yàn)一下：</p>
                        <div class="row">
                            <div class="col-xs-9">
                                <input type="text" class="form-control" id="replaceVal" placeholder="請(qǐng)輸入需要高亮的內(nèi)容以 “|” 隔開(kāi)" value="前端|小程序|系統(tǒng)|軟件">
                            </div>
                            <div class="col-xs-3">
                                <button type="button" class="btn btn-primary btn-block" id="replace">高亮一下</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">? 2019</div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/highlight.js"></script>
<script type="text/javascript">
    /* 保存初始測(cè)試文本內(nèi)容 */
    var oldStr=$("#testHtml").html();
    /* 測(cè)試按鈕點(diǎn)擊 */
    $("#replace").click(function () {
        var val=$("#replaceVal").val();
        if(!val){
            alert('請(qǐng)輸入需要高亮的內(nèi)容');
            return;
        }
        /* 插件調(diào)用，返回 添加高亮效果 的字符串 */
        var newStr=$.highlight(oldStr,{
            color:'#ea0000',// 高度顏色，默認(rèn):#f00
            weight:true,    // 是否加粗，默認(rèn):不加粗
            keys:val        //需要高亮的值，必須的
        });
        $("#testHtml").html(newStr);
    });
    /* 執(zhí)行測(cè)試按鈕點(diǎn)擊事件 */
    $("#replace").click();
</script>