jQuery关键词高亮显示

1.要实现的效果

关键词搜索时内容结果高亮显示

2.js文件

/**
 * Created by dell on 2018/2/28.
 */
(function ($) {
    $.fn.GL = function (options) {
        var dataop = {
            ocolor:'red',
            oshuru:'高亮',
        };
        var chuancan = $.extend(dataop,options);
        $(this).each(function()
        {
            var _this = $(this)
            _this.find($(".glnow")).each(function()
            {
                $(this).css({color:""});
            });
        });
        if(chuancan.oshuru==''){
            return false;
        }else{
            var regExp = new RegExp("(" + chuancan.oshuru.replace(/[(){}.+*?^$|\\\[\]]/g, "\\$&") + ")", "ig");
            $(this).each(function()
            {
                var _this1 = $(this)
                var html = _this1.html();
                var newHtml = html.replace(regExp, '<span class="glnow" style="color:'+chuancan.ocolor+'">'+chuancan.oshuru+'</span>');
                _this1.html(newHtml);
            });
        }
    }
})(jQuery);

将上面代码保存到js文件，然后再前端引入

3.使用方式

// 文字高亮
  function textHighlight() {
        var text=$("#high-light-text").val();
        if (text.length > 0) {
            $('.content').GL({ 
                ocolor: 'red',//设置关键词高亮颜色
                oshuru: text//设置要显示的关键词
            });
        }
    }

4.效果

image.png

5.PHP前沿学习群: 257948349