JS 正規表示式用法的詳細介紹

這次帶給大家用H5製作煙火粒子特效的製作方法，怎麼用H5來製作特效？ H5製作煙火粒子特效的注意事項有哪些，以下就是實戰案例，一起來看一下。

正規表示式使用詳解

簡介

#簡單的說，正規表示式是一種可以用於模式匹配和替換的強有力的工具。其作用如下：
測試字串的某個模式。例如，可以對一個輸入字元字串進行測試，看在該字串是否存在一個電話號碼模式或一個信用卡號碼模式。這稱為數據有效性驗證。
替換文字。可以在文件中使用正規表示式來識別特定文字，然後可以全部將其刪除，或替換為別的文字。
根據模式匹配從字串中提取一個子字串。可以用來在文字或輸入欄位中尋找特定文字。

基本語法

在對正規表示式的功能和作用有了初步的了解之後，我們就來具體看一下正規表示式的語法格式。

正規表示式的形式一般如下：

/love/其中位於「/」定界符之間的部分就是將要在目標物件中進行匹配的模式。使用者只要把希望找出符合物件的模式內容放入「/」定界符之間即可。為了能夠使用戶更加靈活的自訂模式內容，正規表示式提供了專門的「元字元」。所謂元字符就是指那些在正規表示式中具有特殊意義的專用字符，可以用來規定其前導字符(即位於元字符前面的字符)在目標對像中的出現模式。
較為常用的元字元包括： “+”， “*”，以及 “?”。
“+”元字元規定其前導字元必須在目標物件中連續出現一次或多次。
「*」元字元規定其前導字元必須在目標物件中出現零次或連續多次。
「?」元字元規定其前導物件必須在目標物件中連續出現零次或一次。

下面，就讓我們來看看正規表示式元字元的具體應用。

/fo+/因為上述正規表示式中包含「+」元字符，表示可以與目標物件中的「fool」, “fo”, 或「football」等在字母f後面連續出現一個或多個字母o的字串相符。
/eg*/因為上述正規表示式中包含「*」元字符，表示可以與目標物件中的「easy」, “ego”, 或“egg”等在字母e後面連續出現零個或多個字母g的字串相符。
/Wil?/因為上述正則表達式中包含“?”元字符，表示可以與目標對像中的“Win”, 或者“Wilson”,等在字母i後面連續出現零個或一個字母l的字串相匹配。

有時候不知道要匹配多少字元。為了能適應這種不確定性，正規表示式支援限定符的概念。這些限定符可以指定正規表示式的一個給定元件必須要出現多少次才能滿足匹配。

{n} n 是一個非負整數。配對確定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的兩個 o。
{n,} n 是一個非負整數。至少匹配 n 次。例如，'o{2,}' 不能符合 "Bob" 中的 'o'，但能符合 "foooood" 中的所有 o。 'o{1,}' 等價於 'o+'。 'o{0,}' 則等價於 'o*'。
{n,m} m 和 n 均為非負整數，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 將符合 "fooooood" 中的前三個 o。 'o{0,1}' 等價於 'o?'。請注意逗號和兩個數字之間不能有空格。
除了元字元之外，使用者還可以精確指定模式在匹配物件中出現的頻率。例如，/jim {2,6}/ 上述正規表示式規定字元m可以在符合物件中連續出現2-6次，因此，上述正規表示式可以同jimmy或jimmmmmy等字串相符。

在對如何使用正規表示式有了初步了解之後，我們來看看其它幾個重要的元字元的使用方式。
\s：用於匹配單一空格符，包括tab鍵和換行符;
\S：用於匹配單個空格符之外的所有字元;
\d：用於匹配從0到9的數字;
\w：用於匹配字母，數字或下劃線字元;
\W：用於匹配所有與\w不匹配的字元;
. ：用於匹配除換行符之外的所有字元。

(說明：我們可以把\s和\S以及\w和\W看作互為逆運算)

下面，我們就透過實例看一下如何在正規表示式中使用上述元字元。

/\s+/ 上述正規表示式可以用來符合目標物件中的一個或多個空格字元。
/\d000/　如果我們手中有一份複雜的財務報表，那麼我們可以透過上述正規表示式輕而易舉的查找到所有總額達千元的款項。
除了我們以上所介紹的元字符之外，正規表示式中還具有另外一種較為獨特的專用字符，即定位符。定位符用於規定匹配模式在目標物件中的出現位置。 較為常用的定位符包括： “^”, “$”, “\b” 以及 “\B”。
“^”定位符規定匹配模式必須出現在目標字串的開頭
“$”定位符規定匹配模式必須出現在目標對象的結尾
“\b”定位符規定匹配模式必須出現在目標字串的開頭或結尾的兩個邊界之一
“\B”定位符則規定符合物件必須位於目標字串的開頭和結尾兩個邊界之內，
即符合物件既不能作為目標字串的開頭，也不能作為目標字串的結尾。
同樣，我們也可以把「^」和「$」以及「\b」和「\B」看成是互為逆運算的兩組定位符。舉例來說： /^hell/　因為上述正規表示式中包含「^」定位符，所以可以與目標物件中以 “hell”, “hello”或“hellhound”開頭的字串相符。 /ar$/　因為上述正規表示式包含「$」定位符，所以可以與目標物件中以 “car”, “bar”或 “ar” 結尾的字串相符。 /\bbom/　因為上述正規表示式模式以「\b」定位符號開頭，所以可以與目標物件中以 “bomb”, 或 “bom”開頭的字串相符。 /man\b/　因為上述正規表示式模式以「\b」定位符號結尾，所以可以與目標物件中以 “human”, “woman”或 “man”結尾的字串相符。
為了能夠方便使用者更靈活的設定匹配模式，正規表示式允許使用者在匹配模式中指定某一個範圍而不限於具體的字元。例如：
/[A-Z]/上述正規表示式將會與從A到Z範圍內任何一個大寫字母相符。
/[a-z]/上述正規表示式將會與從a到z範圍內任何一個小寫字母相符。
/[0-9]/ 　上述正規表示式將會與從0到9範圍內任何一個數字相符。
/([a-z][A-Z][0-9])+/　上述正規表示式將會與任何由字母和數字組成的字串，如 “aB0” 等相符。

這裡需要提醒使用者註意的一點就是可以在正規表示式中使用 “()” 把字串組合在一起。 「()」符號所包含的內容必須同時出現在目標物件中。因此，上述正規表示式將無法與諸如 “abc”等的字串匹配，因為“abc”中的最後一個字元為字母而非數字。
如果我們希望在正規表示式中實現類似程式邏輯中的「或」運算，在多個不同的模式中任選一個進行匹配的話，可以使用管道符 “|”。例如：/to|too|2/　上述正規表示式將會與目標物件中的 “to”, “too”, 或 “2” 相符。
正規表示式中還有一個較為常用的運算符，即否定符 “[^]”。與我們前文所介紹的定位符 “^” 不同，否定符 “[^]”規定目標物件中不能存在模式中所規定的字串。例如：/[^A-C]/　上述字串將會與目標物件中除A，B，和C之外的任何字元相符。一般來說，當「^」出現在「[]」內時就被視做否定運算子;而當「^」位於「[]」之外，或沒有「[]」時，則應被視做定位符。
最後，當使用者需要在正規表示式的模式中加入元字符，並尋找其匹配物件時，可以使用轉義符「\」。例如：/Th\*/ 　上述正規表示式將會與目標物件中的「Th*」而非「The」等相符。

在建構正規表示式之後，就可以像數學表達式一樣來求值，也就是說，可以從左到右並依照一個優先順序來求值。優先順序如下：

1.\ 轉義符號
2.(), (?:), (?=), [] 圓括號與方括號
3.*, +, ?, {n}, {n,}, {n,m} 限定符
4.^, $, \anymetacharacter 位置與順序
5.|「或」操作

使用實例

在JavaScript 1.2中帶有一個強大的RegExp()對象，可以用來進行正規表示式的匹配操作。其中的test()方法可以檢驗目標物件中是否包含匹配模式，並對應的回傳true或false。
我們可以使用JavaScript編寫以下腳本，驗證使用者輸入的郵件地址的有效性。
正規表示式物件
　　本物件包含正規表示式模式以及表示如何套用模式的標誌。
　　語法 1 re = /pattern/[flags]
　　語法 2 re = new RegExp("pattern",["flags"])
　　參數
　　將要賦值為正規表示式模式的
變數名稱。 　　Pattern
　　必選項。要使用的正規表示式模式。如果使用語法 1，請用 "/" 字元分隔模式。如果用語法 2，用引號將模式引起來。
　　Flags
　　可選項。如果使用語法 2 要用引號將 flag 引起來。標誌可以組合使用，可用的有：
　　g (全文查找出現的所有pattern)
　　i (忽略大小寫)
　　m (多行查找)

　　範例

##　　下面的範例建立一個包含正規表示式模式及相關標誌的物件(re)，向您示範正規表示式物件的用法。在這個例子中，作為結果的正規表示式物件又用於 match 方法中：

function MatchDemo()
　　{
　　var r, re; // 声明变量。
　　var s = "The rain in Spain falls mainly in the plain";
　　re = new RegExp("ain","g"); // 创建正则表达式对象。
　　r = s.match(re); // 在字符串 s 中查找匹配。
　　return(r);
　　}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

jQuery如何做出點擊下拉框中的值累加到文字方塊

ES6中類的靜態方法有哪些作用

vue.js的語法及常用指令的詳解

以上是JS 正規表示式用法的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！