出來混老是要還的-JS正則經常使用的有四種操做： 驗證、切分、提取、替換

前言：能看到這篇隨筆的朋友確定, 多多少少接觸過正則( 不過還記得多少, 只有"天"知道 ), 基礎語法知識咱先扔一邊, 先從實際編程入手去, 驗證瀏覽器中正則的四種常規操做： 驗證、切分、提取、替換

使用正則的目的就三個

1. 表單校驗( 查找字符串中是否有匹配正則規則的字符 ) 若是知足就 XX, 若是沒知足就 OO
2. 提取字符串中的內容(分組) - 提取以後作後續操做(替換replace就是提取的後續操做)
3. 切分 split

1. 驗證

驗證：查找字符串中是否有匹配正則規則的字符。 先來一道基礎題

Demo1 判斷一個字符串中是否包含"hello" ( 判斷字符串中是否包含某個字符串 )

String對象上的方法

方法一： indexOf()

let str = "hello world!";
console.log(str.indexOf("hello") != -1); // true
// 不是正則, 但倒是解決當前題的一種方案,
// indexOf()方法返回調用String對象中第一次出現的指定值的索引, 若是未找到該值, 則返回-1
複製代碼

方法二： includes()

let str = "hello world!";
console.log(str.includes("hello")); // true
// includes() 方法用於判斷一個字符串是否包含在另外一個字符串中, 根據狀況返回true或false
複製代碼

方法三： search()

let str = "hello world!";
console.log(str.search(/hello/) != -1);
// 只有一個參數, 而且是一個正則表達式對象, 若是傳入一個非正則表達式對象,
// 則會使用 new RegExp(obj)隱式地將其轉換爲正則表達式對象
// 若是匹配成功, 則返回正則表達式在字符串中首次匹配項的索引, 不然, 返回-1
複製代碼

方法四： match()

let str = "hello world!";
console.log(!!str.match(/hello/g));
// 若是傳入一個非正則表達式對象, 則會隱式地使用new RegExp(obj)將其轉換爲一個RegExp
// 返回值(數組), 若是匹配到數組第一項是匹配的完整字符串, 以後項是用圓括號捕獲的結果, 若是沒有匹配到, 返回null
// 若是正則表達式包含g標誌, 則該方法返回一個Array, 它包含全部匹配的子字符串而不是匹配對象
複製代碼

RegExp 對象上的方法

方法五： test()

let str = "hello world!";
console.log(/hello/.test(str));
// 用來查看正則表達式與指定的字符串是否匹配, 返回true或false
// 想要知道一個模式是否存在於一個字符串中, 可使用test()或者search
複製代碼

方法六： exec()

let str = "hello world!";
console.log(!!/hello/.exec(str));
// exec() 方法在一個指定字符串中執行一個搜索匹配, 返回一個結果數組或null,
// 若是隻是爲了判斷是否匹配(true或false), 可使用RegExp.test()方法, 或者String.search()方法
複製代碼

驗證總結：

1. 一個確認的( 精準匹配 )字符查找是否被包含, 使用 String.indexOf() 和 String.includes()
2. 一個有規則的( 模糊匹配 )字符查找是否被包含, 使用 RegExp.test() 和 String.search()
3. 查找不推薦, 使用 String.match() 和 RegExp.exec()

切分

切分：所謂"切分", 就是把目標字符串, 切分紅一塊一塊的, 在 JS 中使用 split

Demo2 目標字符串是"html,css,javascript", 按逗號切分

let regex = /,/;
let str = "html,css,javascript";
let str2 = "2018/10/18";
console.log(str.split(regex));
console.log(str2.split(/\//));
複製代碼

split() 方法使用指定的分隔符字符串將一個String對象分割成字符串數組, 以將字符串分隔爲子字符串, 以確認每一個拆分的位置

分隔符能夠是一個字符串或正則表達式

提取

提取：不少時候須要提取部分匹配的數據, 一般須要使用分組引用( 分組捕獲 )

Demo3 提取年月日

方法一: match()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
console.log(str.match(regex));
複製代碼

方法二: exec()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
console.log(regex.exec(str));
複製代碼

方法三: test()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
regex.test(str);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
複製代碼

方法四: search()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
str.search(regex);
console.log(RegExp.$1, RegExp.$2, RegExp.$3);
複製代碼

方法五: replace()

let str = "2018-10-18";
let regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
let date = [];
str.replace(regex, function(match, year, month, day) {
  date.push(year, month, day);
});
console.log(date);
複製代碼

提取總結: 本質上是捕獲分組 推薦使用match和exec 其中, 最經常使用的是match

String.prototype.match(); 參數： 一個正則表達式對象, 若是傳入一個非正則表達式對象, 則會隱式地使用 new RegExp(obj) 將其轉換爲一個 RegExp, 若是你爲提供任何參數, 直接使用 match(), 那麼你會獲得一個包含空字符串的數組[""]

返回值：若是字符串匹配到了表達式, 會返回一個數組, 數組第一項是進行匹配完整的字符串, 以後的項是用圓括號捕獲的結果, 若是沒有匹配到, 則返回 null

若是正則表達式不包含 g 標誌, 則 str.match() 會返回和 RegExp.exec() 相同的結果。並且返回的Array擁有一個額外的input屬性, 該屬性包含被解析的原始字符串, 另外, 還擁有一個index屬性, 該屬性表示匹配結果在原字符中的索引

若是正則表達式包含 g 標誌, 則該方法返回一個Array, 它包含全部匹配的子字符串而不是匹配對象, 捕獲組不會被返回( 即不返回 index 屬性和 input 屬性 )。若是沒有匹配到, 則返回null。

RegExp.exec() 方法在一個指定字符串中執行一個搜索匹配, 返回一個結果數組或 null

String.match() 和 RegExp.exec() 的主要區別

1. 所屬類不一樣
2. 跟 g 有關
3. exec 只會匹配第一個符合的字符串( 意味着 g 對其不起做用 )和全部分組的反向引用, 雖然 g 對其不生效,但其使用 lastIndex 和 while 循環, 能夠達到 g 的目的, 這點比 match 強大
4. match 返回的數組內容, 跟正則表達式中是否帶 g 有關係( 若是帶 g, 包含的是全部匹配的子字符串 ) 若是不帶 g == 默認的 exec

替換

使用正則的目的, 每每是匹配到對應的規則的字符, 下一步經常是替換^_^

正則處理中最強大的 API, 劃重點、劃重點、劃重點, 由於其經常被一些假裝者, 假借替換之名, 作一些皮肉生意

Demo4 從 yyyy-mm-dd 替換成 yyyy/mm/dd

replace

let str = "2018-10-18";
let regex = /-/g;
console.log(str.replace(regex, "/"));
複製代碼

String.replace(); 有兩種使用形式, 第二個參數時字符串仍是函數

1、當其爲字符串時以下字符有特殊含義 $1,$2 ... $99 匹配 1-99 個分組捕獲的文本

2、當其爲函數時, 回調函數的參數具體意義 match( 匹配內容 ), $1( 分組1 ), $2( 分組2 ), index( 索引 ), input( 原字符內容 )

總結

1. 驗證一個字符串( 精準匹配 )是否被包含, 使用 String.indexOf() 、 String.includes()
2. 驗證一個字符串( 模糊匹配 )是否被包含, 使用 String.search()、RegExp.test()
3. 切分一段字符串( 不管確認字符和規則字符 ), 使用 String.split(字符串/正則)
4. 提取分組捕獲信息, 使用 String.match()、RegExp.exec() 注意區分它們之間的區別 -> g
5. 替換, 使用 String.replace(String/RegExp, string/function) 注意第二個參數的的規則信息

傳送門 -> 正則基礎方法應用

參考

《Javascript 正則表達式迷你書》