使用js使检索的关键字变色

最新推荐文章于 2025-07-15 01:01:50 发布

代码不是马

最新推荐文章于 2025-07-15 01:01:50 发布

阅读量5.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： JS

本文链接：https://blog.youkuaiyun.com/lyp1245387976/article/details/95058727

JS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的关键词高亮显示方法，通过正则表达式匹配并在页面上对关键词进行颜色标记，适用于博客或网页上的搜索结果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

})