jQuery段落文字查找高亮

jQuery段落文字查找高亮

收藏
jQuery段落文字查找高亮
jQuery简单的设置段落文本,通过输入框查找关键词,相应的文字高亮显示效果。支持多个关键词查找,注意格式如:“前端|小程序|系统|软件”。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 6年前

使用方法:

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之美-指定内容高亮</div>
                <div class="panel-body">
                    <div>
                        <p class="text-primary">测试文本:</p>
                        <div id="testHtml">
                            <ul>
                                <li>姓名:浪哥</li>
                                <li>工作岗位:WEB前端工程师</li>
                                <li>工作经验:6年</li>
                                <li>在校专业:软件工程(信息工程系)</li>
                                <li>知识技能:HTML5,CSS3,js,es6,Node.js,jQuery,Vue.js,小程序,Dcloud,APICloud,能手写响应式布局、弹性布局框架</li>
                                <li>在校所学科目:C,JAVA,C#,ASP.NET,MYSQL,SQL server,数据结构,软件测试,软件工程,软件架构,计算机操作系统</li>
                                <li>掌握框架:Bootstrap,layui,Element UI</li>
                                <li>自我评价:具有良好的团队意识</li>
                                <li>联系QQ:5564647856</li>
                            </ul>
                        </div>
                    </div>
                    <div>
                        <p class="text-primary">体验一下:</p>
                        <div class="row">
                            <div class="col-xs-9">
                                <input type="text" class="form-control" id="replaceVal" placeholder="请输入需要高亮的内容以 “|” 隔开" value="前端|小程序|系统|软件">
                            </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">
    /* 保存初始测试文本内容 */
    var oldStr=$("#testHtml").html();
    /* 测试按钮点击 */
    $("#replace").click(function () {
        var val=$("#replaceVal").val();
        if(!val){
            alert('请输入需要高亮的内容');
            return;
        }
        /* 插件调用,返回 添加高亮效果 的字符串 */
        var newStr=$.highlight(oldStr,{
            color:'#ea0000',// 高度颜色,默认:#f00
            weight:true,    // 是否加粗,默认:不加粗
            keys:val        //需要高亮的值,必须的
        });
        $("#testHtml").html(newStr);
    });
    /* 执行测试按钮点击事件 */
    $("#replace").click();
</script>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。