站長資訊網(wǎng)你平時如何測試正則表達(dá)式？直接寫在大段的代碼中，然后等待程序運(yùn)行到那里，再用alert顯示結(jié)果？或者是臨時寫一個頁面，測試完成后把它丟掉？
你可以試一下我這個頁面，雖然它很粗糙，但是測試正則表達(dá)式也足夠了:))
一、說明：
1. 我的本意為交流技術(shù)．本人水平很菜．因此所貼出的代碼中，會有不足之處．
2. 代碼可任意修改．如果你覺得你修改過的代碼比我的好，可將它貼出，我非常感謝．
3. 我對javascript的規(guī)范并不很熟悉．我的經(jīng)驗(yàn)來自于開發(fā)．因此，若你對它有更好的見解，歡迎提出，我非常感謝．
二、測試用例:
1. 檢查字符串中是否有非數(shù)字的字符:
test regex: D
test regex flags: g
test string: 1234g56t78
2. 檢查字符串中是否有非0-9、a~z、A-Z、_的字符:
test regex: W
test regex flags: g
test string: i’m a pig! yes I’m!
3. 匹配字符串中的實(shí)數(shù):
test regex: ([d]+]).([d]+)
test regex flags: g
test string: float1234.58.723c65.183
三、程序代碼：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>Javascript regex test page</TITLE>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=GB2312″>
<SCRIPT>
/**
* Method 測試正則表達(dá)式函數(shù)
* @param method 接收到的正則表達(dá)式類的方法
*/
function check(method)
{
// 將用戶輸入的正則表達(dá)式的標(biāo)志轉(zhuǎn)換為小寫
form1.flags.value = form1.flags.value.toLowerCase();
// 如果含有不是g、i、m的字符, 則 提示并返回
if ( form1.flags.value.search(/[^g|i|m]/g) != -1 )
{
alert(“flags only can be g, i, m”);
return;
}
// 利用用戶輸入的字符串和標(biāo)志建立正則表達(dá)式
var re = new RegExp(form1.regex.value, form1.flags.value);
// 獲得并顯示生成的正則表達(dá)式的字符串形式
destRegex.innerText = re.toString() + ‘ ‘;
// 定義 返回值
var cr;
ex = “new RegExp(‘” + form1.regex.value + “‘, ‘” + form1.flags.value + “‘).”;
// 根據(jù)用戶選擇的方法, 進(jìn)行相應(yīng)的調(diào)用
switch ( method )
{
case ‘0’: // 正則表達(dá)式的 exec 方法
cr = re.exec(form1.string.value);
ex = ex + “exec(‘” + form1.string.value + “‘)”;
break;
case ‘1’: // 正則表達(dá)式的 test 方法
cr = re.test(form1.string.value);
ex = ex + “test(‘” + form1.string.value + “‘)”;
break;
case ‘2’: // 字符串類的 match 方法
cr = form1.string.value.match(re);
ex = “‘” + form1.string.value + “‘.match(” + re.toString() + “)”;
break;
case ‘3’: // 字符串類的 search 方法
cr = form1.string.value.search(re);
ex = “‘” + form1.string.value + “‘.search(” + re.toString() + “)”;
break;
case ‘4’: // 字符串類的 replace 方法
cr = form1.string.value.replace(re);
ex = “‘” + form1.string.value + “‘.replace(” + re.toString() + “)”;
break;
case ‘5’: // 字符串類的 split 方法
cr = form1.string.value.split(re);
ex = “‘” + form1.string.value + “‘.split(” + re.toString() + “)”;
break;
}
// 獲得并顯示表達(dá)式
expression.innerText = ex;
// 獲得并顯示計(jì)算結(jié)果的類型
returnType.innerText = typeof(cr);
// 定義結(jié)果
var result = ”;
if ( cr != null && typeof(cr) == ‘object’ && cr.length != null ) // 如果計(jì)算結(jié)果是一個數(shù)組, 則取出所有數(shù)組的值
{
for ( i = 0; i < cr.length; i++ )
{
result += “array[” + i + “] = ‘” + cr[i] + “‘n”;
}
}
else
if ( cr != null ) // 如果計(jì)算結(jié)果不為null, 則取出計(jì)算結(jié)果的值
{
result = cr;
}
// 獲得并顯示結(jié)果
matchResult.innerText = result + ‘ ‘;
// 獲得并顯示正則表達(dá)式的lastIndex屬性
lastIndex.innerText = re.lastIndex + ‘ ‘;
}
</SCRIPT>
</HEAD>
<BODY ALIGN=CENTER>
<FORM NAME=”form1″ METHOD=”post” ACTION=”” ALIGN=CENTER>
<TABLE BORDER=”1″>
<TR>
<TD COLSPAN=”2″ ALIGN=”CENTER”>test javascript regex</TD>
</TR>
<TR>
<TD>test regex:</TD>
<TD><INPUT NAME=”regex” TYPE=”text”></TD>
</TR>
<TR>
<TD>test regex flags:</TD>
<TD><INPUT NAME=”flags” TYPE=”text” ID=”flags”></TD>
</TR>
<TR>
<TD>test string:</TD>
<TD><INPUT NAME=”string” TYPE=”text”></TD>
</TR>
<TR>
<TD>select method:</TD>
<TD ALIGN=”CENTER”>
<SELECT NAME=”select” onChange=”check(this.value)”>
<OPTION VALUE=”0″>exec</OPTION>
<OPTION VALUE=”1″>test</OPTION>
<OPTION VALUE=”2″>match</OPTION>
<OPTION VALUE=”3″>search</OPTION>
<OPTION VALUE=”4″>replace</OPTION>
<OPTION VALUE=”5″>split</OPTION>
</SELECT>
<INPUT VALUE=’run’ onclick=”check(form1.select.value)” TYPE=button>
</TD>
</TR>
<TR>
<TD>dest regex:</TD>
<TD STYLE=”color:blue” ID=destRegex> </TD>
</TR>
<TR>
<TD>dest expression:</TD>
<TD STYLE=”color:blue” ID=expression> </TD>
<TR>
<TR>
<TD>return type:</TD>
<TD STYLE=”color:darkred” ID=returnType> </TD>
</TR>
<TR>
<TD>result:</TD>
<TD STYLE=”color:red” ID=matchResult> </TD>
</TR>
<TR>
<TD>regex lastIndex:</TD>
<TD STYLE=”color:red” ID=lastIndex> </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
