js网页内查找，关键词显示红色

2019独角兽企业重金招聘Python工程师标准>>>

最近公司需求，写了一个小插件，基于jquery，代码很小，只有几行，效果如下：

废话不多说，直接上代码：

$.fn.SelectColor = function(options) {
    var defaults = {
        'content': 'body'
    };
    var changeValue="";
    var parma = $.extend(defaults, options);
    this.bind('input porpertychange',function(){
        var _value=this.value;
        //过滤
        var pattern = new RegExp("[~'!@#$%^&*()-+_=:<>-]");
        if (changeValue == _value ||pattern.test(_value))
            return;
        changeValue=_value
        var _content = $(parma.content);
        if (_content.length>0) {
            _content.each(function () {
                var _item = $(this);
                //1,remove

                var _contentHtml = _item.html();
                _contentHtml = _contentHtml.replace('<selected style="color:red" class="text-danger">', '');
                _contentHtml = _contentHtml.replace('</selected>', '');

                //2,add

                _item.html(_contentHtml.replace(changeValue, '<selected style="color:red" class="text-danger">' + changeValue + '</selected>'));

            })
        }
        
    });
    return this;
}

用法如下：

<script src="~/Content/XianghuSelectedColor/Jquery.SelectColor.js"></script>
    <script>
        $(function () {
            $("#search").SelectColor(
                {
                    content: ".tree-title"
                }
            );

        })
    </script>

很简单，#search是监听文本框，.tree-title是你需要查找的内容区域。

转载于:https://my.oschina.net/xainghu/blog/1501207