DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript正則表達式測試網頁
Javascript正則表達式測試網頁
編輯:JavaScript綜合知識     

 一、說明: 


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>

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved