日期:2014-05-16  浏览次数:20465 次

【工具分享】Javascript正则表达式调试
链接:http://www.renrousousuo.com/tools/regex_debug.html
截图:
第二版 添加Replace功能


第一版 基本Match功能


有一个专门调试正则工具叫:RegexBuddy,3.2版本大概有10M而且不是免费的
我经常使用的功能其实不多,就是把正则输入,看看能匹配多少
简写为html一个文件就搞定了,这里分享一下:
html小工具开源项目:http://code.google.com/p/htmltools
文件下载链接:http://htmltools.googlecode.com/files/regex_debug.html
源代码:
HTML code
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Javascript正则表达式调试工具</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="keywords" content="javascript regex 正则表达式 调试 工具"/>
        <meta name="author" content="王集鹄"/>
        <style type="text/css">
            table{width:100%;}
            #text_regex{width:100%;}
            #textarea_text{width:100%;height:300px;}
            #span_info{color:Red;}
            #div_grippie{background-color:#888;border-color:#444;border-style:solid;border-width:0 1px 1px;cursor:s-resize;height:9px;}
            .zebra0{background-color:Red;color:Blue;}
            .zebra1{background-color:yellow;color:Green;}
        </style>
    </head>
    <body>
        <table>
            <!--tr><td>TODO : 放置选项</td></tr-->
            <tr><td>正则表达式 <span id="span_info"></span></td></tr>
            <tr><td>
                <input type="text" id="text_regex"/>
            </td></tr>
            <tr><td>测试文本内容</td></tr>
            <tr><td>
                <textarea id="textarea_text" cols="*" rows="*"></textarea>
                <div id="div_grippie"></div>
            </td></tr>
            <tr><td>搜索结果 (<span id="span_result">0</span>)</td></tr>
            <tr><td>
                <div id="div_result"></div>
            </td></tr>
        </table>
        <script type="text/javascript">
            /*--
            标题:正则表达式调试工具
            设计:王集鹄
            博客:http://blog.csdn.net/zswang
            日期:2010年4月23日
            --*/

            function text2Html(str) { // 过滤html字符串
                return str.replace(/[&"<> \t\n]/g, function() {
                    return ({
                        "&": "&amp;"
                        , "\"": "&quot;"
                        , "<": "&lt;"
                        , ">": "&gt;"
                        , " ": "&nbsp;"
                        , "\n": "<br/>"
                        , "\t": new Array(5).join("&nbsp;")
                    })[arguments[0]];
                });
            }
            
            function regexEncode(text) { // 构建正则表达式对象
                if (!text) return;
                var match = text.match(/^\/(([^\\\/\n\r]*(\\.)*)+)\/([img]{0,3})$/);
                if (!match) return;
                try {
                    return new RegExp(match[1], match[4]);
                } catch(ex) {
                }
            }
            
            (function() {
                var text_regex = document.getElementById("text_regex");
                var span_info = document.getElementById(&quo