【工具分享】Javascript正则表达式调试

我正遇到问题呢，帮我解决一下啊，http://topic.csdn.net/u/20100423/08/7196ee1e-2983-4a02-b37d-ffd549973e72.html?57872谢谢咯！

就是标准的javascript写法：“/\d+/g”

伴水的创意是无限的，拜读之后，小小的研究了一下var match = text.match(/^\/(([^\\\/\n\r]*(\\.)*)+)\/([img]{0,3})$/);
这个正则由于并列的不定量词之外又有不定量词嵌套，是存在效率陷阱的，也就是存在无限循环匹配的可能
对于RegexBuddy这样的工具，估计是在算法上做了优化，所以这样写正则是可以排除无限循环的可能的
而IE和Firefox等浏览器的正则引擎并没有做这样的优化，所以会存在无限循环匹配的问题举例说明，在正则表达式文本框依次输入
/a\\aaaaaaaaaaaaa\\aaaaaaaaaaaaaaaa/
然后再在最后一个“a”和“/”之间输入一个或多个“\”，IE8.0直接崩溃，Firefox3.6在停止响应一会后会提示脚本忙或停止响应，询问是否停止脚本//在伴水正则的基础上稍加改动
var match = text.match(/^\/(([^\\\/\n\r]|\\.)+)\/([img]{0,3})$/);
//当然，下面这行
return new RegExp(match[1], match[4]);
//要相应的改为
return new RegExp(match[1], match[3]);
这样就避免了不定量词的嵌套，也就消除了无限循环的可能再考虑深一层，其实[]中的\/\n\r也是没必要的
//改为
var match = text.match(/^\/(([^\\]|\\.)+)\/([img]{0,3})$/);
//下面这行
return new RegExp(match[1], match[4]);
//同样要相应的改为
return new RegExp(match[1], match[3]);因为不懂Javascript，别的地方就不好提什么建议了

增加了替换功能已经根据建议做了优化，多谢过客指教囧，web开发离不开js，我会转走的

最新的版本：
<!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,#text_replace{width:100%;}
#textarea_text{width:100%;height:150px;}
.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 id="td_regex">正则表达式
<input type="button" value="\d" title="数字，等价于[0-9]"/>
<input type="button" value="\w" title="文字，等价于[A-Za-z0-9_]"/>
<input type="button" value="\s" title="空白，等价于[^ \f\n\r\t\v]"/>
<input type="button" value="\b" title="单词边界"/>
<input type="button" value="[a-z]" title="字母"/>
<input type="button" value="[\u4e00-\u9fa5]" title="汉字"/>
<input type="button" value="\1" title="第1组匹配"/>
<input type="button" value="\2" title="第2组匹配"/>
<span id="span_regex_info" class="info"></span></td></tr>
<tr><td>
<input type="text" id="text_regex"/>
</td></tr>
<tr><td id="td_replace">替换内容
<input type="button" value="$&" title="完整匹配"/>
<input type="button" value="$1" title="第1组匹配"/>
<input type="button" value="$2" title="第2组匹配"/>
<input type="button" value="$3" title="第3组匹配"/>
<input type="button" value="$4" title="第4组匹配"/>
<input type="button" value="$5" title="第5组匹配"/>
<span id="span_replace_info" class="info"></span>
</td></tr>
<tr><td>
<input type="text" id="text_replace"/>
</td></tr>
<tr><td>测试文本<span id="span_text_info" class="info"></span></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日
--*/

//2010年4月24日王集鹄修改根据lxcnn建议优化正则表达判断 /^\/(([^\\]|\\.)+)\/([img]{0,3})$/
//2010年4月24日王集鹄添加便捷输入、替换功能、拖拽改变高度

function text2Html(str) { // 过滤html字符串
return str.replace(/[&"<> \t\n]/g, function() {
return ({
"&": "&"
, "\"": """
, "<": "<"
, ">": ">"
, " ": " "
, "\n": "<br/>"
, "\t": new Array(5).join(" ")
})[arguments[0]];
});
}
function $(id) { return document.getElementById(id); }

function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
else target["on" + type] = func;
} function removeEventHandler(target, type, func) {
if (target.removeEventListener)
target.removeEventListener(type, func, false);
else if (target.detachEvent)
target.detachEvent("on" + type, func);
else delete target["on" + type];
} function setSelectText(editor, value, range) {
if (!editor || !value) return;
editor.focus();
if (range && range.parentElement() == editor) {
range.text = value;
range.select();
range = null;
} else if (document.selection) {
document.selection.createRange().text = value;
} else if (typeof editor.selectionStart != "undefined") {
var str = editor.value;
var start = editor.selectionStart;
var scroll = editor.scrollTop;
editor.value = str.substr(0, start) + value +
str.substring(editor.selectionEnd, str.length);
editor.selectionStart = start + value.length;
editor.selectionEnd = start + value.length;
editor.scrollTop = scroll;
}
}

(function() {
// 便捷输入
var inputs = $("td_regex").getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if (inputs[i].type.match(/^button$/))
inputs[i].onclick = function() {
var text = this.value;
if (!$("text_regex").value) text = "/" + text + "/";
setSelectText($("text_regex"), text);
$("text_regex").onpropertychange();
};
}
inputs = $("td_replace").getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if (inputs[i].type.match(/^button$/))
inputs[i].onclick = function() {
var text = this.value;
if (!$("text_replace").value) text = "\"" + text + "\"";
setSelectText($("text_replace"), text);
$("text_replace").onpropertychange();
};
}

// 处理正则
var lastText, lastRegex, lastReplace;
var doChange = function() {
var regex;
if (lastRegex.match(/^\/(([^\\\/\n\r]|\\.)+)\/([img]{0,3})$/))
try {
regex = eval("(" + lastRegex + ")");
} catch(ex) {
}
$("span_text_info").innerHTML = lastText ? "" : " 没有测试内容";
$("span_regex_info").innerHTML = regex instanceof RegExp ? "" : " 无效的表达式";

var replace;
if (lastReplace.match(/^"([^\\"]|\\[\s\S])*"$/) ||
lastReplace.match(/^'([^\\']|\\[\s\S])*'$/))
try {
replace = eval("(" + lastReplace + ")");
} catch(ex) {
}
$("span_replace_info").innerHTML = typeof replace == "string" ? "" : " 无效的替换内容";
if (!regex || !lastText) {
$("div_result").innerHTML = "";
$("span_result").innerHTML = 0;
return;
}
var count = 0;
var html = "";
if (typeof replace == "string") {
html = lastText.replace(regex, "\u0001" + replace + "\u0002");
} else {
html = lastText.replace(regex, function() {
return "\u0001" + arguments[0] + "\u0002";
});
}
$("div_result").innerHTML = text2Html(html).replace(/\u0001([^\u0002]*)\u0002/g, function() {
return "<span class=\"zebra" + (count++ % 2) + "\">" + arguments[1] + "</span>";
});
$("span_result").innerHTML = count;
}; $("textarea_text").onpropertychange =
$("text_replace").onpropertychange =
$("text_regex").onpropertychange = function() {
if (lastText == $("textarea_text").value && lastRegex == $("text_regex").value &&
lastReplace == $("text_replace").value) return; // 测试数据未发生变化
lastText = $("textarea_text").value;
lastRegex = $("text_regex").value;
lastReplace = $("text_replace").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);
}
if ($("text_replace").addEventListener) {
$("text_replace").addEventListener("keypress", $("text_replace").onpropertychange, false);
$("text_replace").addEventListener("keyup", $("text_replace").onpropertychange, false);
$("text_replace").addEventListener("input", $("text_replace").onpropertychange, false);
}
$("text_regex").onpropertychange();

// 拖动高度相关
var downTop, downHeight;
var targetMousedown = function(e) {
var style = $("textarea_text").currentStyle ||
document.defaultView.getComputedStyle($("textarea_text"), null);
downTop = e.clientY;
downHeight = parseInt(style.height);
addEventHandler(document, "mousemove", documentMousemove);
addEventHandler(document, "mouseup", documentMouseup);
addEventHandler($("div_grippie"), "losecapture", documentMouseup);
if ($("div_grippie").setCapture) $("div_grippie").setCapture();
addEventHandler(window, "blur", documentMouseup);
if (e.preventDefault) e.preventDefault();
};
addEventHandler($("div_grippie"), "mousedown", targetMousedown);

var documentMousemove = function(e) {
if (window.getSelection)
getSelection().removeAllRanges();
else if (document.selection && document.selection.empty)
document.selection.empty();
var newHeight = downHeight + e.clientY - downTop;
if (newHeight < 20) return;
$("textarea_text").style.height = newHeight + "px";
};

var documentMouseup = function(e) {
removeEventHandler(document, "mousemove", documentMousemove);
removeEventHandler(document, "mouseup", documentMouseup);
removeEventHandler($("div_grippie"), "losecapture", documentMouseup);
if ($("div_grippie").releaseCapture) $("div_grippie").releaseCapture();
removeEventHandler(window, "blur", documentMouseup);
};
})();
</script>
</body>
</html>

这个看着还满深奥的，我正在学习javascript希望楼主多提点好的，资源

谢了，现在正在学习javascript ,呵呵，这个语言很灵活，就是不太好调试，有没有好的调试方法啊，我都是alert（）；一行一行的找错误，上百行的，函数相互调用的调试起来有时都快崩溃了

可以利用firefox浏览器中firebug打日志
http://getfirebug.com/logging实时数据的跟踪也可以利用document.title输出
用alert也可以改一下策略：多次拼装一次输出。

RegexTester这个工具还不错啊！
有兴趣的可以去看看

调试易

【工具分享】Javascript正则表达式调试

解决方案 »