【工具分享】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 ({ "&": "&" , "\"": """ , "<": "<" , ">": ">" , " ": " " , "\n": "<br/>" , "\t": new Array(5).join(" ") })[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("span_info"); var textarea_text = document.getElementById("textarea_text"); var div_result = document.getElementById("div_result"); var span_result = document.getElementById("span_result"); var lastText, lastRegex; var doChange = function() { var error = ""; var regex = regexEncode(lastRegex); if (!regex) error += " 无效的表达式"; if (!lastText) error += " 没有测试内容"; span_info.innerHTML = error; if (error) { div_result.innerHTML = ""; span_result.innerHTML = 0; return; } var i = 0; var count = 0; // 寻找到的个数 var html = []; var match = regex.exec(lastText); var old = -1; // 记录原始序号比较是否发生变化，避免死循环 while (match && match[0] && old != match.index) { if (match.index > i) html.push(text2Html(lastText.substring(i, match.index))); html.push("<span class=\"zebra"); html.push(count++ % 2); html.push("\">"); html.push(text2Html(match[0])); html.push("</span>"); i = match.index + match[0].length; old = match.index; match = regex.exec(lastText); } if (i < lastText.length) html.push(text2Html(lastText.substr(i))); div_result.innerHTML = html.join(""); span_result.innerHTML = count; }; textarea_text.onpropertychange = text_regex.onpropertychange = function() { if (lastText == textarea_text.value && lastRegex == text_regex.value) return; // 表达式和内容未发生变化 lastText = textarea_text.value; lastRegex = text_regex.value; doChange(); }; if (text_regex.addEventListener) { text_regex.addEventListener("keypress", text_regex.onpropertychange, false); text_regex.addEventListener("keyup", text_regex.onpropertychange, false); text_regex.addEventListener("input", text_regex.onpropertychange, false); } if (textarea_text.addEventListener) { textarea_text.addEventListener("keypress", textarea_text.onpropertychange, false); textarea_text.addEventListener("keyup", textarea_text.onpropertychange, false); textarea_text.addEventListener("input", textarea_text.onpropertychange, false); } text_regex.onpropertychange(); })(); </script> </body></html>
我逐步会增加一些实用的工具，如果谁有兴趣参与添加、完善html小工具，可以为你设置“htmltools”项目编辑权限。
[解决办法]
学习学习。。
[解决办法]
犀利哥```
半夜2点发的贴```
[解决办法]
学习了！~
[解决办法]
我正遇到问题呢，帮我解决一下啊，http://topic.csdn.net/u/20100423/08/7196ee1e-2983-4a02-b37d-ffd549973e72.html?57872
谢谢咯！
[解决办法]
作为清洁工的忠实粉丝。一定要支持。。。。。。。。。
[解决办法]
这个工具不错呀。
[解决办法]
强烈支持，一直也想写，
[解决办法]
支持支持
[解决办法]
偶，耶！！！
[解决办法]
学习一下.
[解决办法]
~~~~~~~~jF
[解决办法]
学习了，正则表达式一直是弱项。
[解决办法]
不错，我测试不管输入什么，都显示“无效的表达式”，是输完按回车就执行吗？
[解决办法]
支持一下
[解决办法]
又见伴水哥大作
拜读
[解决办法]
拜读，好好学习
[解决办法]
楼主好人
[解决办法]
我来混点分。。。。。
[解决办法]
灌水。。。
[解决办法]
向高人学习了
[解决办法]
thank you
[解决办法]
伴水的创意是无限的，拜读之后，小小的研究了一下
- JScript code
var match = text.match(/^\/(([^\\\/\n\r]*(\\.)*)+)\/([img]{0,3})$/);
[解决办法]
学习 ~
[解决办法]
伴水发错区了吧，要不要我帮你挪帖啊？
[解决办法]
感谢王集鹄
[解决办法]
很好很强大。过客正则神话。偶像，楼主算法神话。我翻出几年前保存的经典代码。居然翻出伴水版计算器，呵呵。
[解决办法]
这个工具不错呀。
[解决办法]
------解决方案--------------------
谢谢你，非常不错
[解决办法]
这个要收藏
[解决办法]
收藏............
[解决办法]
学习学习
[解决办法]
学习~
[解决办法]
路过.混点可用分
[解决办法]
看一下
[解决办法]
顶上。。。。
[解决办法]
mark
[解决办法]
哈····
·
[解决办法]
谢谢楼主。
[解决办法]
顶礼膜拜。
[解决办法]
学习 学习
[解决办法]
膜拜中
[解决办法]
正则表达式，一看到就晕了，学习一下
[解决办法]
来看看过客和伴水。。
[解决办法]
java?
[解决办法]
加油 不错
[解决办法]
还不明白，不过以后会用，留个记录，以后用。
[解决办法]
加油 不错
[解决办法]
mark
[解决办法]
新人顶你！支持你！
[解决办法]
这个看着还满深奥的，我正在学习javascript希望楼主多提点好的，资源
[解决办法]
看一看！
[解决办法]
谢了，现在正在学习javascript ,呵呵，这个语言很灵活，就是不太好调试，有没有好的调试方法啊，我都是alert（）；一行一行的找错误，上百行的，函数相互调用的调试起来有时都快崩溃了
[解决办法]
mark
[解决办法]
作为清洁工的忠实粉丝。一定要支持。。。。。。。。。
[解决办法]
恩，以后学的时候可以用到了，挺有用的。。。
[解决办法]
标记，收藏，学习………………
[解决办法]
强烈支持，一直也想写，
[解决办法]
[解决办法]
呵呵呵，谢谢谢谢
[解决办法]
关注！
[解决办法]
太好了 有没有免费的啊
------解决方案--------------------
学习。。。。。。。。
[解决办法]
[解决办法]
好东西。。。。。。。
[解决办法]
学习。。。。。。。。
[解决办法]
不错！
顶大虾一个了
[解决办法]
果然强悍！
[解决办法]
11231
[解决办法]
sbp_bs_dj
收藏了!!!!!!!!!!
[解决办法]
拿分走人
[解决办法]
RegexTester这个工具还不错啊！
有兴趣的可以去看看
[解决办法]
[解决办法]
人肉搜索
[解决办法]
学习~~
[解决办法]
走路的
[解决办法]
谢了 lz ..
[解决办法]
正则表达式 一直都是弱项 抄走了
[解决办法]
楼主是不是有帮助文档呀1?
[解决办法]
学习了，下来看看~~
[解决办法]
mark.. 很不错
[解决办法]
不知道好不好用...貌似很牛！
[解决办法]
...貌似很牛！
[解决办法]
学习 学习
[解决办法]
谢谢谢谢
[解决办法]
有意思............
[解决办法]
大师又放新作了~~支持支持
[解决办法]
多谢楼主
[解决办法]
[解决办法]
学习 回复内容太短了！
[解决办法]
awesome!
[解决办法]
学习学习！
[解决办法]
没下载也扣分 垃圾