js正規表示式

哆來咪er發表於2017-11-20
很多時候,我們對正規表示式的印象都是難學難記,學了又忘,忘了又學,但總覺得記不住。
什麼是正規表示式?
正規表示式(Regular Expression)使用單個字元來描述、匹配一系列符合某個句法規則的字串。
使用正規表示式的目的--替換工作。自己先定義一種規則,然後到字串中去匹配一下符合這個規則的子字串。
為了更好地理解正規表示式,我們可藉助視覺化工具,線上地址為:

Regexper:regexper.com
Regulex:jex.im/regulex/#!f…
Debuggex:www.debuggex.com/

先學習一下正規表示式的語法:

1、RegExp物件

js通過內建物件RegExp支援正規表示式,有2種方法例項化RegExp物件: a.字面量 b.建構函式
a.字面量
var reg = /\bare\b/g;複製程式碼

這裡寫圖片描述
這裡寫圖片描述

如何進行全文匹配?☞“g

這裡寫圖片描述
這裡寫圖片描述

b.建構函式
var reg = new RegExp('\\bare\\b','g');複製程式碼
第1個引數:字串☞正規表示式的文字,js中“\”本身就是特殊字元,想使用的話需要轉義;
第2個引數:字串☞標識。

這裡寫圖片描述
這裡寫圖片描述

全文匹配-->“g”:

這裡寫圖片描述
這裡寫圖片描述

修飾符
g:global--全文搜尋,不新增,搜尋到第一個匹配為止;
i:ignore case--忽略大小寫,預設大小寫敏感;
m:multiple lines--多行搜尋。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

發現:大寫的單詞未被替換,想要忽略大小寫,無論大小寫都能匹配☞“i”。

這裡寫圖片描述
這裡寫圖片描述

2、元字元

正規表示式由2種基本字元型別組成:1.原義文字字元, 2.元字元
元字元是在正規表示式中有特殊含義的非字母字元
* + ? $ ^ . | \ () {} []

這裡寫圖片描述
這裡寫圖片描述

3、字元類

一般情況下,正規表示式的一個字元對應字串的一個字元。有時,希望匹配某類字元(即符合一系列特徵的某類字元),該如何處理?
☞我們可以使用元字元[]來構建一個簡單的類;
☞所謂類是指符合某些特性的物件,是一個泛指,而不是特指某個字元;
☞表示式[abc]把字元a或b或c歸為一類,表示式可以匹配這類的字元。

這裡寫圖片描述
這裡寫圖片描述

字元類取反
a.使用元字元^建立反向類/負向類
b.反向類是指不屬於某類的內容
c.表示式[^abc]表示不是字元a或b或c的內容

這裡寫圖片描述
這裡寫圖片描述

4、範圍類

使用字元類匹配數字[0123456789]
可使用[a-z]來連線2個字元,表示從a到z的任意字元(這是個閉區間,即包含a和z本身)。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

在[]組成的類內部是可以連寫的[a-zA-Z]

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

問:“-”並不是特殊字元,也不是元字元,有時在類裡就想要匹配“-”時該如何?

這裡寫圖片描述
這裡寫圖片描述

記住:“-”在中間,即一個開頭,一個結尾這樣的語法裡,表示範圍。

這裡寫圖片描述
這裡寫圖片描述

這樣就可匹配“-”了。

5、預定義類

這裡寫圖片描述
這裡寫圖片描述

匹配一個 ab+數字+任意字元 的字串

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

正規表示式還提供了幾個常用的邊界匹配符

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

發現:凡有“is”的地方都做了替換。
只想替換單詞“is”,單詞是有單詞邊界的。

這裡寫圖片描述
這裡寫圖片描述

若只想替換“This”中的is,觀察發現:前邊不是邊界,後面才是邊界,於是有
這裡寫圖片描述
這裡寫圖片描述

注意:元字元的含義並不是唯一的,在不同的場景下有不同的含義,不在[]裡的含義就不是取反了,而是表示“以xx開始”。

這裡寫圖片描述
這裡寫圖片描述

“.@”☞“任意字元+@”進行匹配
“@.”☞“@+任意字元”進行匹配
“.@$”☞“只想讓@作為結尾”進行匹配

6、量詞

我們希望匹配一個連續出現n次數字的字串,如“\d\d\d\d\d\d\d\d\d\d......”,為了解決這樣的問題,正規表示式引入了量詞的概念。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

7、正規表示式的貪婪模式與非貪婪模式

a.貪婪模式

正規表示式在匹配時會儘可能多地匹配,直到匹配失敗,預設是貪婪模式。

這裡寫圖片描述
這裡寫圖片描述

b.非貪婪模式

讓正規表示式儘可能少地匹配,即一旦匹配成功就不再繼續往下,這就是非貪婪模式。☞在量詞後面加?即可。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

8、分組

匹配字串javascript連續出現3次的場景,若這樣寫javascript{3},如下

這裡寫圖片描述
這裡寫圖片描述

量詞只能針對於緊挨著它的字母,並不能作為整個單詞。使用( )可達到分組的功能,使量詞作用於分組。
(javascript){3},如下

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

使用 | 可達到的效果:

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

反向引用

2017-11-10 =>11/10/2017

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

替換的內容不再是常量,而是變數,此時該如何處理?☞“$”分組類的內容。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

用"$1"等來代表捕獲的分組,又叫分組捕獲。
利用分組,但又不想捕獲它,該如何?☞忽略分組
不希望捕獲某些分組,只需要在分組內加上? :即可。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

9、前瞻

正規表示式從文字頭部向尾部開始解析,文字尾部方向,稱為“前”,文字頭部,稱為“後”。
前瞻就是在正規表示式匹配到規則時,向前檢查是否符合斷言,後顧/後瞻方向反。
js不支援後顧。
符合特定斷言稱為肯定/正向匹配;不符合特定斷言稱為否定/負向匹配。

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

10、js物件屬性

global:是否全文搜尋,預設false。
ignore case:是否大小寫敏感,預設false。
multiline:多行搜尋,預設false。
lastIndex:是當前表示式匹配內容的最後一個字元的下一個位置。
source:正則表示式的文字字串。
var reg1 = /\w/;
var reg2 = /\w/gim;複製程式碼

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

RegExp.prototype.test(str)☞用於測試字串引數中是否存在匹配正規表示式模式的字串。若存在則返回true,否則返回false。
var reg1 = /\w/;
var reg2 = /\w/g;複製程式碼

這裡寫圖片描述
這裡寫圖片描述

產生原因:受lastIndex影響。
var reg1 = /\w/;
var reg2 = /\w/g;
while(reg2.test('ab')){
    console.log(reg2.lastIndex);
}複製程式碼

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

每次都只有第一遍是對的,於是,每次都給它例項化一個新的,但這需要用到記憶體開銷。沒必要這麼做。

這裡寫圖片描述
這裡寫圖片描述

RegExp.prototype.exec(str)☞使用正規表示式模式對字串執行搜尋,並將更新全域性RegExp物件的屬性以反映匹配結果。
若沒有匹配的文字則返回null,否則返回一個結果陣列:
index宣告匹配文字的第一個字元的位置
input存放被檢索的字串string

非全域性呼叫

呼叫非全域性的RegExp物件的exec()時,返回陣列;
第一個元素是與正規表示式相匹配的文字;
第二個元素是與RegExpObject的第一個子表示式相匹配的文字(若有的話);
第三個元素是與RegExp物件的第二個子表示式相匹配的文字(若有的話),以此類推。
String.prototype.search(reg)
☞search()方法用於檢索字串中指定的子字串,或檢索與正規表示式相匹配的子字串;
☞方法返回第一個匹配結果index,查詢不到返回-1;
☞search()方法不執行全域性匹配,它將忽略標誌g,且總是從字串的開始進行檢索。
String.prototype.match(reg)
☞match()方法將檢索字串,以找到一個或多個與regexp匹配的文字;
☞regexp是否具有標誌g對結果影響很大。
非全域性呼叫
若regexp沒有標誌g,則match()方法就只能在字串中執行一次匹配;若未找到任何匹配的文字,將返回null,否則,它將返回一個陣列,其中存放了與它找到的匹配文字有關的資訊;返回陣列的第一個元素存放的是匹配文字,而其餘的元素存放的是與正規表示式的子表示式匹配的文字;除了常規的陣列元素之外,返回的陣列還含有2個物件屬性:index宣告匹配文字的起始字元在字串的位置;input宣告對stringObject的引用。
全域性呼叫
若regexp具有標誌g則match()將執行全域性搜尋,找到字串中的所有匹配子字串,若未找到任何匹配的字串,則返回null;若找到了一個或多個匹配字串,則返回一個陣列。
陣列元素中存放的是字串中所有的匹配子串,且也沒有index屬性或input屬性。
String.prototype.split(reg)
常用split()把字串分割為字元陣列:'a,b,c,d'.split(',');//["a","b","c","d"]
複雜的分割情況下也可使用正規表示式解決:'a1b2c3d'.split(/\d/);//["a","b","c","d"]
String.prototype.replace
☞String.prototype.replace(str,replaceStr)
☞String.prototype.replace(reg,replaceStr)
☞String.prototype.replace(reg,function)

這裡寫圖片描述
這裡寫圖片描述

function引數含義
function會在每次匹配替換時呼叫,有4個引數:
1、匹配字串
2、正規表示式分組內容,沒有分組則沒有該引數
3、匹配項在字串中的index
4、原字串

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

相關文章