技术思绪摘录旅行笔记
很多场景都有搜索,展示搜索结果的时候,关键字的地方高亮显示,让用户一眼就能看到自己想要的内容来自于哪里。很好的体验,但是这个算法有没有适用于很多场景的?有没有兼容脚本混编的?不影响脚本和尖括号的情况下,高亮显示文字内容。

开源是程序员的基本美德

    (function ($) {
        $.fn.textSearch = function (str, options) {
            var defaults = {
                divFlag: true,
                divStr: " ",
                markClass: "",
                markColor: "red",
                nullReport: true,
                callback: function () {
                    return false;
                }
            };
            var sets = $.extend({}, defaults, options || {}),
                clStr;
            if (sets.markClass) {
                clStr = "class='" + sets.markClass + "'";
            } else {
                clStr = "style='color:" + sets.markColor + ";'";
            }
            //对前一次高亮处理的文字还原
            $("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel"); //字符串正则表达式关键字转化
            $.regTrim = function (s) {
                var imp = /[\^\.\\\|\*\+\-\$\?]/g;
                var imp_c = {};
                imp_c["^"] = "\\^";
                imp_c["."] = "\\.";
                imp_c["\\"] = "\\\\";
                imp_c["|"] = "\\|";
                imp_c["("] = "\\(";
                imp_c[")"] = "\\)";
                imp_c["*"] = "\\*";
                imp_c["+"] = "\\+";
                imp_c["-"] = "\\-";
                imp_c["$"] = "\$";
                imp_c["["] = "\\[";
                imp_c["]"] = "\\]";
                imp_c["?"] = "\\?";
                s = s.replace(imp, function (o) {
                    return imp_c[o];
                });
                return s;
            };
            $(this).each(function () {
                var t = $(this);
                str = $.trim(str);
                if (str === "") {
                    return false;
                } else {
                    //将关键字push到数组之中
                    var arr = [];
                    if (sets.divFlag) {
                        arr = str.split(sets.divStr);
                    } else {
                        arr.push(str);
                    }
                }
                var v_html = t.html(); //删除注释
                v_html = v_html.replace(/<!--(?:.*)\-->/g, ""); //将HTML代码支离为HTML片段和文字片段,其中文字片段用于正则替换处理,而HTML片不处理
                var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g;
                var a = v_html.match(tags),
                    test = 0;
                $.each(a, function (i, c) {
                    if (!/<(?:.|\s)*?>/.test(c)) { //非标签http://www.yangshaofneg.com
                        //开始执行替换
                        $.each(arr, function (index, con) {
                            if (con === "") {
                                return;
                            }
                            var reg = new RegExp($.regTrim(con), "g");
                            if (reg.test(c)) {
                                //正则替换
                                c = c.replace(reg, "♂" + con + "♀");
                                test = 1;
                            }
                        });
                        c = c.replace(/♂/g, "<span rel='mark' " + clStr + ">").replace(/♀/g, "</span>");
                        a[i] = c;
                    }
                });
                //将支离数组重新组成字符串
                var new_html = a.join("");
                $(this).html(new_html);
                if (test === 0 && sets.nullReport) {
                    return false;
                }
                //执行回调函数
                sets.callback();
            });
        };
    })(jQuery);
    //调用
    $("body").textSearch("By", {
        callback: function () {
            //alert("检查完毕");   
        }
    });


CarsonIT 微信扫码关注公众号 策略、创意、技术

留下您的脚步

 

最近评论

查看更多>>

站点统计

总文章数:276 总分类数:18 总评论数:90 总浏览数:186.01万

精选推荐

阅读排行

友情打赏

请打开您的微信,扫一扫