ES9(四) —— RegExp-dotAll...

RegExp

• RegExp 在ES9中新增

• dotAll（點匹配）

  • 判斷有沒有開啓dotAll

• named captured groups（命名分組捕獲）

  • ES5

    • ES9

• loodbehind assert（後行斷言）

  • 先行斷言
  • 後行斷言
• ES6-ES10學習版圖

RegExp 在ES9中新增

• dotAll
• 命名分組捕獲
• 後行斷言

dotAll（點匹配）

正則中的點就是dotAll，都是匹配任意字符，可是不少字符是沒法匹配的。例如：

• 四個字節的UTF-16的字符
• 行終止符 \\n \\r 換行 回車

console.log(/foo.bar/.test('foo\nbar'))
//false
console.log(/foo.bar/.test('fooabar'))
// true

加上s能夠匹配換行符

console.log(/foo.bar/s.test('foo\nbar'))
// true

加上s能夠匹配換行符，加上u就能夠匹配4位的UTF-16字符，點的功能就全能了

console.log(/foo.bar/us.test('foo\nbar'))

判斷有沒有開啓dotAll

使用flags屬性判斷，若是沒有開啓就是false

const r = /foo.bar/
console.log(r.dotAll)
// false
console.log(r.flags)
// 空
const re = /foo.bar/s
console.log(re.dotAll)
// true
console.log(re.flags)
// s

named captured groups（命名分組捕獲）

以前分組捕獲有，可是命名的分組捕獲剛有

ES5

如何取到字符串中匹配的年月日？

// 先看一下match匹配出來的值有哪些?
console.log("2019-06-07".match(/(\d{4})-(\d{2})-(\d{2})/))
// ["2019-06-07", "2019-06-07", "2019", "06", "07", index: 0, input: "2019-06-07", groups: undefined]

// 完整匹配
// 第一個括號分組
// 第二個括號分組
// 第三個括號分組
// index 從第幾個字符開始匹配到的
// input 完整的輸入字符串
// groups 目前位空，一會就知道用法了

const t = "2019-06-07".match(/(\d{4})-(\d{2})-(\d{2})/)
console.log(t[1]) //2019
console.log(t[2]) //06
console.log(t[3]) //07

上面的方法，若是數據複雜的時候很差寫，何況數組還要數第幾個，那麼加一個名字會比較好

ES9

// 在括號裏面寫 ?<命名key>

const T = "2019-06-07".match(/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/)

console.log(T)
// ["2019-06-07", "2019", "06", "07", index: 0, input: "2019-06-07", 
// groups: {day: "07", month: "06", year: "2019"}]
// 這個時候groups裏面有值了，並且用命名的key能夠取到

console.log(T.groups.year)  //2019
console.log(T.groups.month)  //06
console.log(T.groups.day)  //07

loodbehind assert（後行斷言）

先行斷言都有，ES9剛有的後行斷言

先行斷言

js一直是先行斷言的

let test = 'hello world'
console.log(test.match(/hello(?=\sworld)/))
// 後面的括號不是分組匹配，是先行斷言
// 先遇到一個條件

後行斷言

可是我要知道world以前的那個是hello，就是後行斷言

ES9這個能力補齊了

console.log(test.match(/(?<=hello\s)world/))
// (?<=hello\s) 是判斷world前面是hello加空格
console.log(test.match(/(?<!hell2\s)world/))
// ! 表示不等於
// \1表示捕獲匹配

ES6-ES10學習版圖