模板
教程
环境
性能
功能
管理
javascript正则表达式测试网页
发表于：2007-06-30来源：作者：点击数：
标签：
Java script正则表达式测试网页 你平时如何测试正则表达式？直接写在大段的代码中，然后等待程序运行到那里，再用alert显示结果？或者是临时写一个页面，测试完成后把它丢掉？ 你可以试一下我这个页面，虽然它很粗糙，但是测试正则表达式也足够了:)) 一、说
Javascript正则表达式测试网页
你平时如何测试正则表达式？直接写在大段的代码中，然后等待程序运行到那里，再用alert显示结果？或者是临时写一个页面，测试完成后把它丢掉？
你可以试一下我这个页面，虽然它很粗糙，但是测试正则表达式也足够了:))
一、说明：
1. 我的本意为交流技术．本人水平很菜．因此所贴出的代码中，会有不足之处．
2. 代码可任意修改．如果你觉得你修改过的代码比我的好，可将它贴出，我非常感谢．
3. 我对javascript的规范并不很熟悉．我的经验来自于开发．因此，若你对它有更好的见解，欢迎提出，我非常感谢．
二、测试用例:
1. 检查字符串中是否有非数字的字符:
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. 匹配字符串中的实数:
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 测试正则表达式函数
* @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>
<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>
