js正則表達式

不少時候,咱們對正則表達式的印象都是難學難記,學了又忘,忘了又學,但總以爲記不住。
什麼是正則表達式?
正則表達式(Regular Expression)使用單個字符來描述、匹配一系列符合某個句法規則的字符串。
使用正則表達式的目的--替換工做。本身先定義一種規則,而後到字符串中去匹配一下符合這個規則的子字符串。
爲了更好地理解正則表達式,咱們可藉助可視化工具,在線地址爲:

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

先學習一下正則表達式的語法:

一、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種基本字符類型組成:1.原義文本字符, 2.元字符
元字符是在正則表達式中有特殊含義的非字母字符
* + ? $ ^ . | \ () {} []

這裏寫圖片描述
這裏寫圖片描述

三、字符類

通常狀況下,正則表達式的一個字符對應字符串的一個字符。有時,但願匹配某類字符(即符合一系列特徵的某類字符),該如何處理?
☞咱們可使用元字符[]來構建一個簡單的類;
☞所謂類是指符合某些特性的對象,是一個泛指,而不是特指某個字符;
☞表達式[abc]把字符a或b或c歸爲一類,表達式能夠匹配這類的字符。

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

四、範圍類

使用字符類匹配數字[0123456789]
可以使用[a-z]來鏈接2個字符,表示從a到z的任意字符(這是個閉區間,即包含a和z自己)。

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

問:「-」並非特殊字符,也不是元字符,有時在類裏就想要匹配「-」時該如何?

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

這樣就可匹配「-」了。

五、預約義類

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

正則表達式還提供了幾個經常使用的邊界匹配符

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

發現:凡是有「is」的地方都作了替換。
只想替換單詞「is」,單詞是有單詞邊界的。

這裏寫圖片描述
這裏寫圖片描述

若只想替換「This」中的is,觀察發現:前邊不是邊界,後面纔是邊界,因而有
這裏寫圖片描述
這裏寫圖片描述

注意:元字符的含義並非惟一的,在不一樣的場景下有不一樣的含義,不在[]裏的含義就不是取反了,而是表示「以xx開始」。

這裏寫圖片描述
這裏寫圖片描述

「.@」☞「任意字符+@」進行匹配
「@.」☞「@+任意字符」進行匹配
「.@$」☞「只想讓@做爲結尾」進行匹配

六、量詞

咱們但願匹配一個連續出現n次數字的字符串,如「\d\d\d\d\d\d\d\d\d\d......」,爲了解決這樣的問題,正則表達式引入了量詞的概念。

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

七、正則表達式的貪婪模式與非貪婪模式

a.貪婪模式

正則表達式在匹配時會儘量多地匹配,直到匹配失敗,默認是貪婪模式。

這裏寫圖片描述
這裏寫圖片描述

b.非貪婪模式

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

八、分組

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

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

使用 | 可達到的效果:

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

反向引用

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

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

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

九、前瞻

正則表達式從文本頭部向尾部開始解析,文本尾部方向,稱爲「前」,文本頭部,稱爲「後」。
前瞻就是在正則表達式匹配到規則時,向前檢查是否符合斷言,後顧/後瞻方向反。
js不支持後顧。
符合特定斷言稱爲確定/正向匹配;不符合特定斷言稱爲否認/負向匹配。

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述

十、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個參數:
一、匹配字符串
二、正則表達式分組內容,沒有分組則沒有該參數
三、匹配項在字符串中的index
四、原字符串

這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
這裏寫圖片描述
相關文章
相關標籤/搜索