站長資訊網
最全最豐富的資訊網站

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

三、程序代碼:

<!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>

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
亚洲精品白色在线发布| 国内精品51视频在线观看| 国产高清在线精品二区| 国产网站麻豆精品视频| 精品日韩亚洲AV无码一区二区三区| 国产麻豆精品久久一二三 | 日韩精品人妻av一区二区三区| 国产乱码精品一区二区三区 | 伊人久99久女女视频精品免| 亚欧在线精品免费观看一区 | 日韩综合在线视频| 日韩精品免费在线视频| 国产精品无码免费视频二三区| 99j久久精品久久久久久| 久久国产精品范冰啊| 久久久91精品国产一区二区三区| 97精品国产91久久久久久| 久久精品国产精品亜洲毛片 | 99国产精品热久久久久久| 无码人妻精品一区二区三区66| 久久精品视频亚洲| 久久综合精品不卡一区二区| 国产精品日本一区二区不卡视频| 国产亚洲精品福利在线无卡一 | 少妇人妻偷人精品无码视频新浪| 国产精品无码一区二区三区不卡| 亚洲精品乱码久久久久蜜桃| 一本色道久久综合亚洲精品蜜桃冫 | 亚洲精品9999久久久久无码| 无码精品A∨在线观看免费| 国产精品高清一区二区人妖| 国产精品一区二区久久| 99在线精品一区二区三区| 2021国产成人精品国产| 久久99热这里只频精品6| 亚洲欧美日韩国产精品一区| 亚洲最大天堂无码精品区| 国产精品沙发午睡系列| 国产精品青青青高清在线 | 国精品无码一区二区三区左线| 自拍偷在线精品自拍偷无码专区 |