JS正則表達式學習筆記2

第二階段

該部分內容是學習正則的第二篇內容，點擊第一部分查看第一部分的內容。

這部分學習的內容包括：

1. 分組
2. 斷言
3. 匹配模式（貪婪和懶惰）

分組

我們可以通過量詞匹配一個字符多次，但是如果我們想要匹配多個字符多次，就需要用到分組，比如下面一個例子

// 匹配字母和數字連續出現三次的字符
let str = "a1b2c3d4";
let reg = /([a-z]\d){3}/

str.replace(reg,"x");

// 通過分組重新排列字符
let str = "2019-09-10";
let reg = /^(\d{4})-(\d{2})-(\d{2})/
str.replace(reg,"$2/$3/$1")
// result "09/10/2019"

// 匹配IP v4 的地址
let reg = /^((2[0-4]\d|25[0-5]|[0-1]?\d\d?)\.){3}2[0-4]\d|25[0-5]|[0-1]?\d\d?/;
// IP地址的格式是xxx.xxx.xxx.xxx 3個數字一個點的四位字符，匹配3次，加上三位字符，組合就是ip地址
// 我們通過分組，把分組內容匹配三次

// 可以在正則中通過反向引用匹配分組的內容
let reg = /(\w{3}) is \1/;  

reg.test('kid is kid') // true
reg.test('dik is dik') // true
reg.test('kid is dik') // false
reg.test('dik is kid') // false

//\1 反向引用的內容和分組內容是一樣的

特點

• 用()括起來的匹配正則
• 1 表示反向引用，引用第一個子表達式的內容
• 2 表示反向引用，引用第二個子表達式的內容
• $0 匹配整個字符串
• $1 匹配到的第一個分組的內容
• $2 匹配到的第二個分組的內容

斷言

斷言有點像^ $ b那樣用於指定一個位置，這個位置應該滿足一定的條件（即斷言）。通常使用斷言用來查找某些內容之前或之後的東西（不包括他們本身）；

代碼	說明
?=exp	匹配exp前面的位置
?<=exp	匹配exp後面的位置
?!exp	匹配後面跟的不是exp的位置
?<!exp	匹配前面不是exp的位置

DEMO

// ?=exp
let reg = /\b\w+(?=ing\b)/
let str = I'm singing while you're dancing.
// 匹配以ing結尾單詞的前面部分

// ?<=exp
let reg = /(?<=\bre)\w+\b/; 
// 匹配re開頭單詞的後半部分
let str = reading a book;

匹配模式

• 貪婪模式
• 懶惰模式

當正則表達式中包含能接受重複的限定詞時，通常的行爲是匹配儘可能多的字符。比如以下：

let reg = /a*b/;
let str = "aabab";
let result = str.replace(reg,"X");
// 以上str字符串會被全部替換爲一個字符X。這被稱爲貪婪匹配模式
// result = "X";

但有時候，我們希望匹配儘可能少的字符。只需要在量詞限定符的後面再加上一個問號?就行。

let reg = /a*?b/;
let str = "aabab";
let result = str.replace(reg,"X");
// 以上str字符串會被全部替換爲一個字符X。這被稱爲貪婪匹配模式
// result = "Xab";

代碼	說明
*?	row 1 col 2
+?	row 2 col 2
??	row 2 col 2
{n,m}?	row 2 col 2
+?	row 2 col 2
+?	row 2 col 2

多思考，多練習，然後校驗結果，反覆這個過程，在這個過程當中就會一點一點的進步的。

練習題

首先下載一個正則表達式測試工具：地址

我們的練習都可以使用這個工具來進行測試；

1. 匹配正確的電話
2. 匹配正確的郵件
3. 匹配IP地址(IPV4)
4. 匹配URL
5. 匹配身份證號碼（身份證有18位，最後一位可以是字符X）
6. 匹配整數
7. 匹配小數
8. 匹配中文
9. 匹配xxxx-xx-xx格式的日期（或者xxxx/xx/xx）
10. 去掉http協議的jpg文件的協議頭

var imgs = [
      'http://img.host.com/images/fds.jpg',
    'https://img.host.com/images/fjlj.jpg',
    'http://img.host.com/images/djalsdf.png',
    'https://img.host.com/images/adsjfl.png',
    'http://img.host.com/image/jasdlf.jpg'
];

1. 獲取 url 中的參數

const _url = "http://img.host.com/images/fds.jpg?name=mmcai&age=28"

1. 字符串中小寫數值替換爲大寫

//給定字符串
const str = '958317640';
//期望結果
const newStr = "九五八三一七六四零"

1. 把數字用科學計數法表達10000000000 變爲10.000.000.000
2. 給一個連字符串例如：get-element-by-id轉化成駝峯形式
3. 分割數字每三個以一個逗號劃分
4. 匹配固定電話[phone]
5. 匹配以下字符串當中的數值字符，並輸出數組

//原字符串
const str = "d3gfhf72gh254bhku289fgdhdy675gfh"

// 期望得到的結果
const result = [3,72,254,289,675];

1. 校驗密碼——只能輸入6-20位字母、數字、下劃線
2. 匹配漢字

練習答案晚點給出，大家寫完也可以百度查找哈，但結果不一定唯一，可以有好幾種寫法的，只要通過正則校驗工具校驗通過達到結果就可以哦~。

參考資料：

• http://deerchao.net/tutorials...
• https://www.imooc.com/video/1...