jQuery 指定内容高亮

以你之姓@ 2022-01-29 07:13 198阅读 0赞

使用 jQuery 快速开发一个指定内容高亮的插件

在线示例地址：[http://www.jq22.com/jquery-info21555][http_www.jq22.com_jquery-info21555]

示例图：

![2019-05-21-00-00-13.png][]

插件源码：

/*
        作者:helang
        邮箱:helang.love@qq.com
        jQuery插件库:http://www.jq22.com/mem395541
        CSDN博客:https://blog.csdn.net/u013350495
        微信公众号:web-7258
    */
    
    ;$.extend({
        highlight: function (str, params) {
            var reg = new RegExp(("(" + params.keys + ")"), "gm");
            var color = params.color || '#f00';
            var weight = params.weight ? 'bold' : 'normal';
            var replace = '<span style="color:' + color + ';font-weight: ' + weight + ';">$1</span>';
            return str.replace(reg, replace);
        }
    });

插件使用：

/* 插件调用，返回 添加高亮效果 的字符串 */
    var newStr=$.highlight(oldStr,{
        color:'#ea0000',// 高度颜色，默认:#f00
        weight:true,    // 是否加粗，默认:不加粗
        keys:val        //需要高亮的值，必须的
    });

请点击文章上方的【[在线示例地址][http_www.jq22.com_jquery-info21555]】查看示例。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[http_www.jq22.com_jquery-info21555]: http://www.jq22.com/jquery-info21555
[2019-05-21-00-00-13.png]: /images/20220129/6a55a47b2b034d0f8271bf51205fa216.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220129/14dbd39faf4a4c449280d67aa2f9a85f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 指定内容高亮

件地址：[https://ext.dcloud.net.cn/plugin?id=735][https_ext.dcloud.net.cn_plugin_id_735] ...

今天药忘吃喽~/ 2024年04月17日 21:47/ 0 赞/ 20 阅读

相关【实现搜索结果中搜索内容关键字高亮】

![20191119142041428.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

待我称王封你为后i/ 2023年06月14日 10:47/ 0 赞/ 22 阅读

相关匹配关键字搜索内容高亮

export const codeText = (keyWord, content) => { const searchArray = keyWord.s

骑猪看日落/ 2023年01月18日 04:14/ 0 赞/ 89 阅读

相关 jQuery实现代码高亮编辑器

我在写一个网页版navicat，其中的一个小插曲。只是一种思路，肯定会有不完善的地方，我最近正在完善。目前词法分析只针对Mysql。用jquery是因为方便，后期会去掉。

ゝ一纸荒年。/ 2022年12月21日 04:48/ 0 赞/ 290 阅读

相关 vsCode选中内容高亮插件

默认vsCode用来编写代码，然后选中的内容的话，默认不是很突出，所以需要用到一个能够使得你选中的内容更加高亮突出的插件，这样有利于你寻找代码直接的衔接和定义的位置。本文介

深碍√TFBOYSˉ_/ 2022年11月16日 04:49/ 0 赞/ 408 阅读

相关 vim 指定后缀文件采用语法高亮

au BufNewFile,BufRead \.tpl,\.dwt setf php 新文件或读取tpl和dwt后缀的文件时，使用PHP语法高亮参考: [https:/

╰+哭是因爲堅強的太久メ/ 2022年09月02日 12:47/ 0 赞/ 222 阅读

相关文章内容关键字替换、高亮

// 高亮关键词 highLightKeywords(article) { // article是传入的参数文章内容 // keyWo

你的名字/ 2022年02月25日 09:39/ 0 赞/ 259 阅读

相关 jQuery 指定内容高亮

使用 jQuery 快速开发一个指定内容高亮的插件在线示例地址：[http://www.jq22.com/jquery-info21555][http_www.jq22.c

以你之姓@/ 2022年01月29日 07:13/ 0 赞/ 199 阅读

相关代码高亮

知识点代码高亮显示符号 \` 代码高亮显示符号 ~(不推荐) 演示内容 ```java public static void

ゞ浴缸里的玫瑰/ 2021年12月14日 00:27/ 0 赞/ 355 阅读

相关 jquery highlight高亮插件使用

jquery highlight官网：[https://bartaz.github.io/sandbox.js/jquery.highlight.html][https_bar

àì夳堔傛蜴生んèń/ 2021年06月22日 15:36/ 0 赞/ 519 阅读