jQuery实现关键字变色

最新推荐文章于 2024-09-17 12:07:35 发布

原创最新推荐文章于 2024-09-17 12:07:35 发布 · 3.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一段JavaScript代码，该代码能够实现对网页中指定关键字的高亮显示功能。通过使用正则表达式，此方法能全局搜索并标记出所有匹配的关键字。

//js代码

$（function）{

//关键字变色
    var searchText = $("#autoflag").val();//获取你输入的关键字；
    var regExp = new RegExp(searchText, "g");//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
    $(".p").each(function()//遍历p类里的文字；
    {
        var html = $(this).html();
        var newHtml = html.replace(regExp, "<span style='color:#c90a16' >"+searchText+"</span>");//将找到的关键字替换，加上highlight属性；

        $(this).html(newHtml);//更新文章；

    });

}