首頁 > 開發者 > JavaScript

JavascriptRegex測試網頁

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

你平時如何測試Regex？直接寫在大段的代碼中，然後等待程式運行到那裡，再用alert顯示結果？或者是臨時寫一個頁面，測試完成後把它丟掉？

你可以試一下我這個頁面，雖然它很粗糙，但是測試Regex也足夠了:))

一、說明：

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 測試Regex函數

* @param method 接收到的Regex類的方法

*/

function check(method)

{

// 將使用者輸入的Regex的標誌轉換為小寫

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;

}

// 利用使用者輸入的字串和標誌建立Regex

var re = new RegExp(form1.regex.value, form1.flags.value);

// 獲得並顯示產生的Regex的字串形式

destRegex.innerText = re.toString() + ' ';

// 定義 傳回值

var cr;

ex = "new RegExp('" + form1.regex.value + "', '" + form1.flags.value + "').";

// 根據使用者選擇的方法, 進行相應的調用

switch ( method )

{

case '0': // Regex的 exec 方法

cr = re.exec(form1.string.value);

ex = ex + "exec('" + form1.string.value + "')";

break;

case '1': // Regex的 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 + ' ';

// 獲得並顯示Regex的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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More