<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>測試正則表達式的網頁</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312">
<link rel="stylesheet" type="text/css" href="css/css.css">
<SCRIPT>
/**
* Method 測試正則表達式函數
* @param method 接收到的正則表達式類的方法
*/
function check(method)
{
// 將用戶輸入的正則表達式的標志轉換為小寫
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;
}
?
// 利用用戶輸入的字符串和標志建立正則表達式
var re = new RegExp(form1.regex.value, form1.flags.value);
?
// 獲得并顯示生成的正則表達式的字符串形式
destRegex.innerText = re.toString() + ' ';
?
// 定義 返回值
var cr;
?
ex = "new RegExp('" + form1.regex.value + "', '" + form1.flags.value + "').";
?
// 根據用戶選擇的方法, 進行相應的調用
switch ( method )
{
case '0': // 正則表達式的 exec 方法
cr = re.exec(form1.string.value);
ex = ex + "exec('" + form1.string.value + "')";
break;
?
case '1': // 正則表達式的 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;
}
?
// 獲得并顯示表達式
expression.innerText = ex;
?
// 獲得并顯示計算結果的類型
returnType.innerText = typeof(cr);
?
// 定義結果
var result = '';
?
if ( cr != null && typeof(cr) == 'object' && cr.length != null ) // 如果計算結果是一個數組, 則取出所有數組的值
{
for ( i = 0; i < cr.length; i++ )
{
result += "array[" + i + "] = '" + cr[i] + "'\n";
}
}
else
if ( cr != null ) // 如果計算結果不為null, 則取出計算結果的值
{
result = cr;
}
?
// 獲得并顯示結果
matchResult.innerText = result + ' ';
?
// 獲得并顯示正則表達式的lastIndex屬性
lastIndex.innerText = re.lastIndex + ' ';
}
</SCRIPT>
</HEAD>
?
<BODY ALIGN=CENTER>
<h3>測試正則表達式</h3>
<FORM NAME="form1" METHOD="post" ACTION="" ALIGN=CENTER>
<TABLE BORDER="1" width="772" align="center">
<TR>
<TD COLSPAN="2" ALIGN="CENTER" width="762"><B>測試正則表達式</B></TD>
</TR>
<TR>
<TD width="147">正則表達式字符串:</TD>
<TD width="609"><INPUT NAME="regex" TYPE="text" size="75"></TD>
</TR>
<TR>
<TD width="147">正則表達式參數:</TD>
<TD width="609"><INPUT NAME="flags" TYPE="text" ID="flags" size="20" value="g"></TD>
</TR>
<TR>
<TD width="147">測試用的字符串:</TD>
<TD width="609"><INPUT NAME="string" TYPE="text" size="75"></TD>
</TR>
<TR>
<TD width="147">選擇測試方法:</TD>
<TD ALIGN="CENTER" width="609">
<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='祝你好運' onclick="check(form1.select.value)" TYPE=button>
</TD>
</TR>
<TR>
<TD width="147">生成的表達式:</TD>
<TD STYLE="color: blue" ID=destRegex width="609"> </TD>
</TR>
<TR>
<TD width="147">生成的JS表達式:</TD>?
<TD STYLE="color: blue" ID=expression width="609"> </TD>
<TR>
<TD width="147">返回類型:</TD>?
<TD STYLE="color: darkred" ID=returnType width="609"> </TD>
</TR>
<TR>
<TD width="147">結果:</TD>
<TD STYLE="color: red" ID=matchResult width="609"> </TD>
</TR>
<TR>
<TD width="147">regex lastIndex:</TD>?
<TD STYLE="color: red" ID=lastIndex width="609"> </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>