转贴(佚名):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
三、程序代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 |
<!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> |