JavaScript (js) 正则表达式 测试器

 

<! 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]  +   " ' " ; 
} 
} 
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 >& nbsp; </ TD >  
</ TR >  
< TR >  
< TD > dest expression: </ TD >  
< TD STYLE = " color:blue "  ID = expression >& nbsp; </ TD >  
< TR >  
< TR >  
< TD > return  type: </ TD >  
< TD STYLE = " color:darkred "  ID = returnType >& nbsp; </ TD >  
</ TR >  
< TR >  
< TD > result: </ TD >  
< TD STYLE = " color:red "  ID = matchResult >& nbsp; </ TD >  
</ TR >  
< TR >  
< TD > regex lastIndex: </ TD >  
< TD STYLE = " color:red "  ID = lastIndex >& nbsp; </ TD >  
</ TR >  
</ TABLE >  
</ FORM >  
</ BODY >  
</ HTML >