代码改变世界

文字高亮

2020-04-08 09:50  胡dot  阅读(262)  评论(0)    收藏  举报 
 1 /**
 2  * Created by dell on 2018/2/28.
 3  */
 4 (function ($) {
 5     $.fn.GL = function (options) {
 6         var dataop = {
 7             ocolor:'red',
 8             oshuru:'高亮',
 9         };
10         var chuancan = $.extend(dataop,options);
11         $(this).each(function()//先遍历，清除上一次的样式
12         {
13             var _this = $(this)
14             _this.find($(".glnow")).each(function()//找到所有highlight属性的元素；
15             {
16                 $(this).css({color:""});//将他们的属性去掉；
17             });
18         });
19         if(chuancan.oshuru==''){
20             return false;
21         }else{
22             var regExp = new RegExp("(" + chuancan.oshuru.replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");//创建正则表达式，g表示全局的，如果不用g，则查找到第一个就不会继续向下查找了；
23             $(this).each(function()//遍历文章；
24             {
25                 var _this1 = $(this)
26                 var html = _this1.html();
27                 var newHtml = html.replace(regExp, '<span class="glnow" style="color:'+chuancan.ocolor+'">'+chuancan.oshuru+'</span>');//将找到的关键字替换，加上highlight属性；
28                 _this1.html(newHtml);//更新文章；
29             });
30         }
31     }
32 })(jQuery);
1 $(".one").click(function () {
2     var otext = $("input").val();
3 
4     $('.text').GL({
5         ocolor:'red',   //设置关键词高亮颜色
6         oshuru:otext   //设置要显示的关键词
7     });
8 })
<p class="text">我是测试文字，测试<span class="glnow" style="color:red">高亮</span>功能</p>
<p class="text">我是测试文字，测试<span class="glnow" style="color:red">高亮</span>功能</p>
<p class="text">我是测试文字，测试<span class="glnow" style="color:red">高亮</span>功能</p>
<p class="text">我是测试文字，测试<span class="glnow" style="color:red">高亮</span>功能</p>