網頁

JavaScript - 表單元素 - Regular Expression

Regular Expression


Regular Expression(正規表達式) - 基本字元
名稱說明
\n換行符號
\rEnter
\tTab
\xHex16進位ASCII
\xOct8進位ASCII
\符號轉義,讓符號只是符號,無RE作用

因為符號在RE裡有其他作用,\.代表.、\?代表?,符號有:.、?、/、\、[、]{、}、(、)、+、*、|。

Regular Expression(正規表達式) - 字元集"["與"]"符號"
名稱說明
[abc]代表英文a、b、c
[a-z]代表26個英文小寫
[A-Z]代表26個英文大寫
[0-9]代表數字0到9
[a-zA-Z]代表所有大小寫英文
[^abc]除了a、b、c以外任何字元
-英文或數字的一個範圍
[^]在[]裡的^為排除的意思

[ ]代表一個區段、段落。

Regular Expression(正規表達式) - 常用範圍
名稱說明
\w[0-9a-zA-Z_],任何英數字和底線
\W[^0-9a-zA-Z_],也就是^\w的意思
\d[0-9],任何數字
\D[^0-9],也就是^\w的意思
\s比對空格,空白字元(space)、tab、換行字元、return/enter
..(點)比較任何字元,換行字元(newline)除外

以上都是常用的Escape字串。

Regular Expression語法


var reName = /pattern/[g|i|gi]; 

使用變數來儲存pattern,遇/.../字串自動建立RegExp物件。把pattern被在"//"符號之間,就是你所要過濾的規則,例如/[0-9]/。

[g|i|gi]選擇性參數,尋找方式

  • g:比對字串中所有符合pattern字串的子字串, 如果沒有設定,將只找第一個符合pattern的字串
  • i:不區分pattern字串的英文大小寫

尋找方式範例

// jscript(j小寫)和Jscript(J大寫)都符合
var reJS1 = /[jJ]script/;
// 2*2會出現四種符合的組合
// javascript、javaScript、Javascript、JavaScript
var reJS2 = /[jJ]ava[sS]cript/; 

^開頭$結尾


// 找出開頭是This的字串
// 注意,此^不是放在[^],位置不同作用不同
var reStar = /^This/;
// 找出結尾是bye.的字串 
var reEnd = /bye.$/

Regular Expression(正規表達式) - ^開頭$結尾
名稱說明
^比對字串開頭
$比較字串結尾

^開頭$結尾範例


// 需要指定「出現次數」,例如身分證
// A123456789,第一碼為英文,第二碼為男女,3-9碼為數字
var reID = /^[a-zA-Z]{1}[1-2]{1}[0-9]{8}/; 

量詞


Regular Expression(正規表達式) - 量詞
名稱說明(次數)
?0或1次
*0或多次
+1或多次
{n}出現n次
{n,}至少n次
{n,m}n到m次
( )集合字元或/和中介字元,成為子樣式

最後一個(),我們舉個例子,「/(Hot)? ?Donuts/」過濾條件,可比對出Donuts或Hot Donuts。而「/(red|blue) pill/] 過濾條件,可比對出red pill或blue pill。

定義好樣式(pattern)後,可使用test()方法來測試。

// 定義過濾條件
var regex = /^\d{5}/$;
// 使用test()測試是否符適合條件
if (!regex.test(inputField.Value))
  ... 

RegExp物件


var objRE = new RegExp("pattern字串", "g|i|gi"); 

第一個pattern字串(不需放在//符號之間),第二個為尋找方式的參數。使用RegExp物件的test()方法進行比對,符合回傳true。

objRE.test(strValue); 

如果在JavaScript字串變數需要尋找是否擁有符合Regular Expression的pattern子字串,此時請使用String物件的match()方法,例如,

String.match(objRE); 

字串(String)的match()方法範例,

var str = "This is book.";
var objRE = new RegExp("is", "g");
var result = str.match(objRE); 

我們將比對結果儲存起來,然後,

// 沒有會傳回null,有會傳回Array
// is, is --> 陣列
document.write(result);
// 傳回符合數量
// 2
document.write(result.length); 

2 則留言:

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。