FeHelper/apps/regexp/index.js

/**
 * FeHelper 正则工具
 */

/**
 * 自适应高度的jquery插件
 */
$.fn.extend({
    textareaAutoHeight:function (options) {
        this._options = {
            minHeight:0,
            maxHeight:100000
        };

        this.init = function () {
            for (var p in options) {
                this._options[p] = options[p];
            }
            if (this._options.minHeight === 0) {
                this._options.minHeight = parseFloat($(this).height());
            }
            for (var p in this._options) {
                if ($(this).attr(p) == null) {
                    $(this).attr(p, this._options[p]);
                }
            }
            $(this).keyup(this.resetHeight).change(this.resetHeight)
                .focus(this.resetHeight);
        };
        this.resetHeight = function () {
            var _minHeight = parseFloat($(this).attr("minHeight"));
            var _maxHeight = parseFloat($(this).attr("maxHeight"));

            $(this).height(0);
            var h = parseFloat(this.scrollHeight);
            h = h < _minHeight ? _minHeight :
                h > _maxHeight ? _maxHeight : h;
            $(this).height(h).scrollTop(h);
            if (h >= _maxHeight) {
                $(this).css("overflow-y", "scroll");
            }
            else {
                $(this).css("overflow-y", "hidden");
            }
        };
        this.init();
    }
});

var RegExpTools = (function () {

    "use strict";

    var regElm, srcElm, rstElm, rstCount, srcBackgroundElm, srcWrapperElm, regListElm;
    var ID_PREFIX = 'tmp_id_';
    var TAG_MATCHED = 'b';
    var TAG_NOT_MATCHED = 'i';
    var TR_ID_PREFIX = 'tr_' + ID_PREFIX;

    var _getRegExp = function (regTxt) {
        try {
            return new Function('return ' + regTxt)();
        } catch (e) {
            return null;
        }
    };

    var _buildTable = function (rstArray) {
        var tbl = ["<table class='table table-bordered table-striped table-condensed table-hover'>"];
        tbl.push('<tr class="active"><th class="num">序号</th><th>匹配结果</th><th>在原字符串中的位置</th></tr>')
        $.each(rstArray, function (i, item) {
            tbl.push('<tr id="' + TR_ID_PREFIX + item.index + '" data-index="' + item.index + '">');
            tbl.push('<td class="num">' + (i + 1) + '</td>'
                + '<td class="content">' + item.text + '</td>'
                + '<td class="index">' + item.index + '</td>');
            tbl.push('</tr>');
        });
        tbl.push('</table>');
        return tbl.join('');
    };

    var _createTag = function (type, item) {
        var tags = [];
        for (var i = 0, len = item.text.length; i < len; i++) {
            tags.push('<' + type + ' data-id="' + ID_PREFIX + item.index + '">'
                + item.text.charAt(i) + '</' + type + '>');
        }
        return tags.join('');
    };

    var _blinkHighlight = function () {
        $('tr[id^=' + TR_ID_PREFIX + ']').click(function (e) {
            var index = $(this).attr('data-index');
            var tags = $(TAG_MATCHED + '[data-id=' + ID_PREFIX + index + ']');
            tags.animate({
                opacity:0
            }, 200).delay().animate({
                    opacity:1
                }, 200).delay().animate({
                    opacity:0
                }, 200).delay().animate({
                    opacity:1
                }, 200);
        });
    };

    var _highlight = function (srcText, rstArray) {
        if (!srcText) {
            srcBackgroundElm.html('');
            return;
        }
        var hl = [];
        var preIndex = 0;
        $.each(rstArray, function (i, item) {
            if (i === 0) {
                if (item.index === 0) {
                    hl.push(_createTag(TAG_MATCHED, item));
                } else {
                    hl.push(_createTag(TAG_NOT_MATCHED, {
                        index:0,
                        text:srcText.substring(0, item.index)
                    }));
                    hl.push(_createTag(TAG_MATCHED, item));
                }
            } else {
                preIndex = rstArray[i - 1].index + rstArray[i - 1].text.length;
                hl.push(_createTag(TAG_NOT_MATCHED, {
                    index:preIndex,
                    text:srcText.substring(preIndex, item.index)
                }));
                hl.push(_createTag(TAG_MATCHED, item));
            }
        });
        srcBackgroundElm.html(hl.join(''));
        _blinkHighlight();
    };

    var _emptyTable = function (message) {
        var tbl = ["<table class='table table-bordered table-striped table-condensed table-hover'>"];
        tbl.push('<tr class="active"><th class="num">序号</th><th>匹配结果</th></tr>');
        tbl.push('<tr><td colspan="2">' + message + '</td></tr>');
        tbl.push('</table>');
        return tbl.join('');
    };

    var _dealRegMatch = function (e) {
        srcWrapperElm.height(srcElm.height() + 24);

        var regTxt = regElm.val().trim();
        var srcTxt = srcElm.val().trim();
        if (!regTxt || !srcTxt) {
            rstElm.html(_emptyTable('不能匹配'));
            rstCount.html('0个');
            _highlight();
        } else {
            var reg = _getRegExp(regTxt);
            if (!reg || !reg instanceof RegExp) {
                rstElm.html(_emptyTable('正则表达式错误！'));
                rstCount.html('0个');
                _highlight();
                return;
            }
            var rst = [];
            // 用字符串的replace方法来找到匹配目标在元字符串中的准确位置
            srcTxt.replace(reg, function () {
                var matchedTxt = arguments[0];
                var txtIndex = arguments[arguments.length - 2];
                rst.push({
                    text:matchedTxt,
                    index:txtIndex
                });
            });
            if (!rst || !rst.length) {
                rstElm.html(_emptyTable('不能匹配'));
                rstCount.html('0个');
                _highlight();
            } else {
                rstElm.html(_buildTable(rst));
                rstCount.html(rst.length + '个');
                _highlight(srcElm.val(), rst);
            }
        }
    };

    var _init = function () {
        $(function () {
            regElm = $('#regText');
            srcElm = $('#srcCode');
            srcBackgroundElm = $('#srcBackground');
            srcWrapperElm = $('#srcWrapper');
            rstElm = $('#rstCode').html(_emptyTable('暂无输入'));
            rstCount = $('#rstCount');
            regListElm = $('#regList');

            // 输入框自适应高度
            regElm.textareaAutoHeight({minHeight:34});
            srcElm.textareaAutoHeight({minHeight:50});
            srcBackgroundElm.textareaAutoHeight({minHeight:50});

            // 监听两个输入框的按键、paste、change事件
            $('#regText,#srcCode').keyup(_dealRegMatch).change(_dealRegMatch)
                .bind('paste', _dealRegMatch);

            regListElm.change(function (e) {
                var reg = $(this).val();
                var regTipElm = $('#regTip');
                regElm.val(reg);
                if (!reg) {
                    regTipElm.hide();
                } else {
                    regTipElm.show();
                }
            });
        });
    };

    return {
        init:_init
    };
})();

RegExpTools.init();