正則表達式

RegExp對象

Regular Experssion使用單個字符串來描述、匹配一系列符合某個句法規則的字符串

測試網站：https://regexper.com

建立方式

• 字面量

var reg = /\bis\b/g
"he is a boy".replace(reg,'IS')
//"he IS a boy"

• 構造函數

var reg = new RegExp('\\bis\\b','g');
"he is a boy".replace(reg,'IS')
//"he IS a boy"

元字符
正則表達式由兩種基本字符類型組成：

• 原義文本字符

• 元字符

  • 元字符是在正則表達式中有特殊含義的非字母字符
  • * + ? $ ^ . | \ () {} []

字符類

通常狀況下正則表達式一個字符對應字符串一個字符

表達式ab\t的含義是

咱們也可使用元字符 []來構建一個簡單的類

所謂類是指符合某些特徵的對象，一個泛指，而不是特指某個字符

表達式[abc]把字符a或b或c歸爲一類，表達式能夠匹配這類的字符,

'a1b2c3d3'.replace(/[abc]/g,'X')
"X1X2X3d3"

字符串取反

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

範圍類

• 正則表達式還提供了範圍類
• 能夠用[a-z]來鏈接兩個字符表示從a到z的任意字符
• 這是個閉區間，也就是包含a和z自己

'a1b2c3d4x5z6'.replace(/[a-z]/g,'X')
//"X1X2X3X4X5X6"

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

'a1b2c3d4x5z6DSFDAFDAFD'.replace(/[a-zA-Z]/g,'X')
//"X1X2X3X4X5X6DSFDAFDAFD"

這種狀況下如何匹配到'-'?只須要在後面補上一個'-'就好了

'a1b2-c-3d4x5z6DS-F-DAFDAFD'.replace(/[a-zA-Z-]/g,'X')
//"X1X2XXX3X4X5X6XXXXXXXXXXXX"

JS預約義類及邊界

預約類:

"This is a boy".replace(/\Bis\b/,'0')
//"Th0 is a boy"

幾個經常使用的邊界匹配字符:

示例一：

"This is a boy".replace(/is/g,'0')
//"Th0 0 a boy"

只想替換第一個'is

"This is a boy".replace(/\Bis\b/,'0')
//"Th0 is a boy"

只想替換第二個

"This is a boy".replace(/\bis\b/g,'0')
//"This 0 a boy"

示例二：

"@123@345@".replace(/@./g,'Q')
//"Q23Q45@"

只想替換第一個

"@123@345@".replace(/^@./g,'Q')
//"Q23@345@"

只替換最後一個

"@123@345@".replace(/.@$/g,'Q')
//"@123@34Q"

var mulstr =  "@123   
               @456
               @678";
              
 mulStr.replace(/^@\d/gm,'x')
 // X123
    X456
    X678

量詞

咱們但願匹配一個連續出現20次數字的字符串：

顯然不能用這中方式:\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d\d

?

+

*

JS正則貪婪模式與非貪婪模式

貪婪模式
正則表達式在匹配的時候會盡量多的匹配，直到匹配失敗

"12345678".replace(/\d{3,6}/g,'X')
//"X78"

//123456  -> X

非貪婪模式

• 讓正則表達式儘量少的匹配，也就是說一旦成功匹配再也不繼續嘗試就是非貪婪模式
• 作法很簡單，在量詞後面加上?便可

"12345678".replace(/\d{3,6}?/g,'X')
//"XX78"

//123，456  ->  X,X

分組

()
匹配字符串 Byron連續出現三次的場景，可能會用Byron{3}

並不能達到咱們期待的結果，只會處理緊挨着的，

用()能夠達到分組的功能，使量詞做用域分組:

'a1b2c3d4'.replace(/[a-z]\d{3}/g,'X')
//"a1b2c3d4"

'a1b2c3d4'.replace(/([a-z]\d){3}/g,'X')
//"Xd4"

或

使用|達到效果

Byron|Casper

'ByronCasper'.replace(/Byron|Casper/g,'X')
// "XX"

'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g,'X')
//"XX"

反向引用

2015-12-25 --> 12/25/2015

'2015-12-25'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1')
//"12/25/2015"

忽略分組

不但願捕獲某些分組，只須要在分組內加上?:就能夠

(?:Byron).(ok)

不讓捕獲分組

前瞻

• 正則表達式從文本頭部向尾部開始解析，文本尾部方向
• 前瞻就是在正則表達式匹配到規則的時候，向前檢查是否符合斷言，後顧/後瞻方向相反
• javascript不支持後顧
• 符合和不符合特定斷言稱爲確定/正向匹配和否認/負向匹配

前瞻

'a2*3'.replace(/\w(?=\d)/g,'X')
//"X2*3"

JS對象屬性

對象屬性

• g:global全文搜索，不添加，搜索到第一個匹配中止
• i:ignore case忽略大小寫，默認大小寫敏感
• m:multiple lines多行搜索
• lastIndex:是當前表達式匹配內容的最後一個字符的下一個位置
• source:正則表達式的文本內容框

var reg1 = /\w/
var reg2 = /\w/gim

reg1.ignoreCase
//false

reg1.multiline
//false

reg1.global
//false

reg2.ignoreCase
//true
reg2.multiline
//true
reg2.global
//true

test和exec方法

test

RegExp.prototype.test(str)

• 用於測試字符串參數中是否存在匹配正則表達式模式的字符串
• 若是存在則返回true，不存在則返回false

var reg1 = /\w/
var reg2 = /\w/g

while(reg2.test('ab')){
  console.log(reg2.lastIndex)
}

//1
//2

exec

RegExp.prototype.exec(str)

• 使用正則表達式模式對字符串執行搜索，並將更新全局RegExp對象的屬性以反映匹配結果

• 若是沒有匹配的文本則返回null，不然返回一個結果數組

  • index聲明匹配文本的第一個字符的位置
  • input存放被檢索的字符串string

非全局調用

• 調用非全局的RegExp對象的exec()時，返回數組
• 第一個元素是與正則表達式相匹配的文本
• 第二個元素是與RegExpObject的第一個子表達式相匹配的文本(若是有的話)
• 第三個元素是與RegExp對象的第二個子表達式相匹配的文本(若是有的話)，以此類推

var reg3 = /\d(\w)(\w)\d/
var reg4 = /\d(\w)(\w)\d/g
var ts = '1az2bb3cy4dd5cc'

var ret = reg3.exec(ts)

console.log(reg3.lastIndex+'\t'+ret.index+'\t'+ret.toString())
//"0  0 1az2,a,z"
//非全局lastIndex不生效，reg3.lastIndex並未生效
console.log(reg3.lastIndex+'\t'+ret.index+'\t'+ret.toString())
//"0  0 1az2,a,z"

while(ret = reg4.exec(ts)){
  console.log(reg4.lastIndex+'\t'+ret.index+'\t'+ret.toString())
}
//"4  0 1az2,a,z"
//"10 6 3cy4,c,y"

字符串對象方法

String.prototype.search(reg)

• search()方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串
• 方法返回第一個匹配結果index，查找不到返回-1
• search()方法不執行全局匹配，它將忽略標誌g，而且老是從字符串的開始進行檢索

'dafd1afd'.search(/1/g)
//4
//輸入數字也能匹配到，嘗試往正則表達式轉

String.prototype.match(reg)

• match()方法將檢索字符串，以找到一個或多個與regexp匹配的文本
• regexp是否具備標誌g對結果影響很大

非全局調用

• 若是沒有regexp沒有標誌g，那麼match()方式就只能在字符串中執行一次匹配
• 若是沒有找到任何匹配的文本，將返回null

• 找到了它將返回一個數組，其中存放了與它找到的匹配文本有關的信息

  • 返回數組的第一個元素存放的是匹配文本，而其他的元素存放的是與正則表達式的子表達式匹配的文本

  • 除了常規的數組元素以外，返回的數組還包含了兩個對象屬性

    • index聲明匹配文本的起始字符，在字符串的位置
    • input聲明，對stringObject的引用

var reg3 = /\d(\w)\d/
var reg4 = /\d(\w)\d/g
var ts = '$1a2b3c4d5e'


var ret = ts.match(reg3)
console.log(ret)
console.log(ret.index+'\t'+reg3.lastIndex)


//["1a2", "a", index: 1, input: "$1a2b3c4d5e", groups: undefined]
// 1    0

全局調用

• 若是regexp具備標誌g則match()方法將執行全局檢索，找到字符串中的全部匹配字符串

  • 沒有找到任何匹配的字符串，則返回null
  • 若是找到了一個或多個匹配字符串，則返回一個數組
• 數組元素中存放的是字符串中全部的匹配子串，並且也沒有index屬性或input屬性

var reg3 = /\d(\w)\d/
var reg4 = /\d(\w)\d/g
var ts = '$1a2b3c4d5e'


var ret = ts.match(reg4)
console.log(ret)
console.log(ret.index+'\t'+reg4.lastIndex)


//["1a2", "3c4"]
//undefined    0

String.prototype.split(reg)

• 咱們常用split方法將字符串分割爲字符數組

'a,b,c,d'.split(',') //["a","b","c","d"]

• 在一些複雜的分割狀況下咱們可使用正則表達式解決

'a1b2c3d'.split(/\d/);
//["a", "b", "c", "d"]

'a1.b|2c3d'.split(/\.|\|/);

//["a1", "b", "2c3d"]

String.prototype.replace()

• String.prototype.replace(str,replaceStr)

'a1b1c1'.replace('1',2)
//"a2b1c1"

• String.prototype.replace(reg,replaceStr)

'a1b1c1'.replace(/1/,2)
//"a2b1c1"

• String.prototype.replace(reg,function)

function會在每次匹配替換的時候調用，有四個參數

• 一、匹配字符串
• 二、正則表達式分組內容，沒有分組則沒有該參數
• 三、匹配項在字符串中的index
• 四、原字符串

'a1b2c3d4'  => 'a2b3c4d5'

'a1b2c3d4e5'.replace(/\d/g,function(match,index,origin){
    console.log(index)
    return parseInt(match) + 1
})
// 1
//3
//5
//7
//9
//"a2b3c4d5e6"

'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g,function(match,group1,group2,group3,index,origin){
    console.log(index)
    return parseInt(group1)+parseInt(group3)
})
// 1
//5
//"a3c7e5"