Javascript正则表达式测试网页
程序员文章站
2022-03-10 22:21:33
你平时如何测试正则表达式？直接写在大段的代码中，然后等待程序运行到那里，再用alert显示结果？或者是临时写一个页面，测试完成后把它丢掉？ 你可以试一下我这个页面，虽然它很...
你平时如何测试正则表达式？直接写在大段的代码中，然后等待程序运行到那里，再用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>
你可以试一下我这个页面，虽然它很粗糙，但是测试正则表达式也足够了:))
一、说明：
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>
推荐阅读
-
Java 正则表达式学习总结和一些小例子_javascript技巧
-
javascript实现简单的可随机变色网页计算器示例
-
php使用curl和正则表达式抓取网页数据示例_PHP教程
-
javascript - 网页中的 shell 是真 shell 还是其他？
-
javascript - 网页批注功能实现（要在服务端保存
-
JavaScript中全局变量、函数内变量以及常量表达式的效率测试_javascript技巧
-
网页实时显示服务器时间和javscript自运行时钟_javascript技巧
-
JavaScript利用正则表达式替换字符串中的内容
-
Python笔记-使用requests获取网页数据及re中用正则表达式获取指定数据
-
网页运行时提示对象不支持abigimage属性或方法_javascript技巧