服务器之家

服务器之家 > 正文

Javascript正则表达式测试网页

时间:2020-07-05 15:06     来源/作者:正则表达式教程

你平时如何测试正则表达式?直接写在大段的代码中,然后等待程序运行到那里,再用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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  
  3. <HTML> 
  4.  
  5. <HEAD> 
  6.  
  7. <TITLE>Javascript regex test page</TITLE> 
  8.  
  9. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=GB2312"
  10.  
  11. <SCRIPT> 
  12.  
  13. /** 
  14.  
  15. * Method 测试正则表达式函数 
  16.  
  17. * @param method 接收到的正则表达式类的方法 
  18.  
  19. */ 
  20.  
  21. function check(method) 
  22.  
  23.  
  24. // 将用户输入的正则表达式的标志转换为小写 
  25.  
  26. form1.flags.value = form1.flags.value.toLowerCase(); 
  27.  
  28.  
  29.  
  30. // 如果含有不是g、i、m的字符, 则 提示并返回 
  31.  
  32. if ( form1.flags.value.search(/[^g|i|m]/g) != -1 ) 
  33.  
  34.  
  35. alert("flags only can be g, i, m"); 
  36.  
  37. return
  38.  
  39.  
  40.  
  41.  
  42. // 利用用户输入的字符串和标志建立正则表达式 
  43.  
  44. var re = new RegExp(form1.regex.value, form1.flags.value); 
  45.  
  46.  
  47.  
  48. // 获得并显示生成的正则表达式的字符串形式 
  49.  
  50. destRegex.innerText = re.toString() + ' '
  51.  
  52.  
  53.  
  54. // 定义 返回值 
  55.  
  56. var cr; 
  57.  
  58.  
  59.  
  60. ex = "new RegExp('" + form1.regex.value + "', '" + form1.flags.value + "')."
  61.  
  62.  
  63.  
  64. // 根据用户选择的方法, 进行相应的调用 
  65.  
  66. switch ( method ) 
  67.  
  68.  
  69. case '0'// 正则表达式的 exec 方法 
  70.  
  71. cr = re.exec(form1.string.value); 
  72.  
  73. ex = ex + "exec('" + form1.string.value + "')"
  74.  
  75. break
  76.  
  77.  
  78.  
  79. case '1'// 正则表达式的 test 方法 
  80.  
  81. cr = re.test(form1.string.value); 
  82.  
  83. ex = ex + "test('" + form1.string.value + "')"
  84.  
  85. break
  86.  
  87.  
  88.  
  89. case '2'// 字符串类的 match 方法 
  90.  
  91. cr = form1.string.value.match(re); 
  92.  
  93. ex = "'" + form1.string.value + "'.match(" + re.toString() + ")"
  94.  
  95. break
  96.  
  97.  
  98.  
  99. case '3'// 字符串类的 search 方法 
  100.  
  101. cr = form1.string.value.search(re); 
  102.  
  103. ex = "'" + form1.string.value + "'.search(" + re.toString() + ")"
  104.  
  105. break
  106.  
  107.  
  108.  
  109. case '4'// 字符串类的 replace 方法 
  110.  
  111. cr = form1.string.value.replace(re); 
  112.  
  113. ex = "'" + form1.string.value + "'.replace(" + re.toString() + ")"
  114.  
  115. break
  116.  
  117.  
  118.  
  119. case '5'// 字符串类的 split 方法 
  120.  
  121. cr = form1.string.value.split(re); 
  122.  
  123. ex = "'" + form1.string.value + "'.split(" + re.toString() + ")"
  124.  
  125. break
  126.  
  127.  
  128.  
  129.  
  130. // 获得并显示表达式 
  131.  
  132. expression.innerText = ex; 
  133.  
  134.  
  135.  
  136. // 获得并显示计算结果的类型 
  137.  
  138. returnType.innerText = typeof(cr); 
  139.  
  140.  
  141.  
  142. // 定义结果 
  143.  
  144. var result = ''
  145.  
  146.  
  147.  
  148. if ( cr != null && typeof(cr) == 'object' && cr.length != null ) // 如果计算结果是一个数组, 则取出所有数组的值 
  149.  
  150.  
  151. for ( i = 0; i < cr.length; i++ ) 
  152.  
  153.  
  154. result += "array[" + i + "] = '" + cr[i] + "'\n"
  155.  
  156.  
  157.  
  158. else 
  159.  
  160. if ( cr != null ) // 如果计算结果不为null, 则取出计算结果的值 
  161.  
  162.  
  163. result = cr; 
  164.  
  165.  
  166.  
  167.  
  168. // 获得并显示结果 
  169.  
  170. matchResult.innerText = result + ' '
  171.  
  172.  
  173.  
  174. // 获得并显示正则表达式的lastIndex属性 
  175.  
  176. lastIndex.innerText = re.lastIndex + ' '
  177.  
  178.  
  179. </SCRIPT> 
  180.  
  181. </HEAD> 
  182.  
  183.  
  184.  
  185. <BODY ALIGN=CENTER> 
  186.  
  187. <FORM NAME="form1" METHOD="post" ACTION="" ALIGN=CENTER> 
  188.  
  189. <TABLE BORDER="1"
  190.  
  191. <TR> 
  192.  
  193. <TD COLSPAN="2" ALIGN="CENTER">test javascript regex</TD> 
  194.  
  195. </TR> 
  196.  
  197. <TR> 
  198.  
  199. <TD>test regex:</TD> 
  200.  
  201. <TD><INPUT NAME="regex" TYPE="text"></TD> 
  202.  
  203. </TR> 
  204.  
  205. <TR> 
  206.  
  207. <TD>test regex flags:</TD> 
  208.  
  209. <TD><INPUT NAME="flags" TYPE="text" ID="flags"></TD> 
  210.  
  211. </TR> 
  212.  
  213. <TR> 
  214.  
  215. <TD>test string:</TD> 
  216.  
  217. <TD><INPUT NAME="string" TYPE="text"></TD> 
  218.  
  219. </TR> 
  220.  
  221. <TR> 
  222.  
  223. <TD>select method:</TD> 
  224.  
  225. <TD ALIGN="CENTER"
  226.  
  227. <SELECT NAME="select" onChange="check(this.value)"
  228.  
  229. <OPTION VALUE="0">exec</OPTION> 
  230.  
  231. <OPTION VALUE="1">test</OPTION> 
  232.  
  233. <OPTION VALUE="2">match</OPTION> 
  234.  
  235. <OPTION VALUE="3">search</OPTION> 
  236.  
  237. <OPTION VALUE="4">replace</OPTION> 
  238.  
  239. <OPTION VALUE="5">split</OPTION> 
  240.  
  241. </SELECT> 
  242.  
  243. <INPUT VALUE='run' onclick="check(form1.select.value)" TYPE=button> 
  244.  
  245. </TD> 
  246.  
  247. </TR> 
  248.  
  249. <TR> 
  250.  
  251. <TD>dest regex:</TD> 
  252.  
  253. <TD STYLE="color:blue" ID=destRegex>&nbsp;</TD> 
  254.  
  255. </TR> 
  256.  
  257. <TR> 
  258.  
  259. <TD>dest expression:</TD> 
  260.  
  261. <TD STYLE="color:blue" ID=expression>&nbsp;</TD> 
  262.  
  263. <TR> 
  264.  
  265. <TR> 
  266.  
  267. <TD>return type:</TD> 
  268.  
  269. <TD STYLE="color:darkred" ID=returnType>&nbsp;</TD> 
  270.  
  271. </TR> 
  272.  
  273. <TR> 
  274.  
  275. <TD>result:</TD> 
  276.  
  277. <TD STYLE="color:red" ID=matchResult>&nbsp;</TD> 
  278.  
  279. </TR> 
  280.  
  281. <TR> 
  282.  
  283. <TD>regex lastIndex:</TD> 
  284.  
  285. <TD STYLE="color:red" ID=lastIndex>&nbsp;</TD> 
  286.  
  287. </TR> 
  288.  
  289. </TABLE> 
  290.  
  291. </FORM> 
  292.  
  293. </BODY> 
  294.  
  295. </HTML> 

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享
歪歪漫画vip账号共享2020_yy漫画免费账号密码共享 2020-04-07
沙雕群名称大全2019精选 今年最火的微信群名沙雕有创意
沙雕群名称大全2019精选 今年最火的微信群名沙雕有创意 2019-07-07
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
返回顶部