引言

在做項(xiàng)目的時(shí)候難免會(huì)遇到很多奇葩解析字符串的需求，簡(jiǎn)單的字符串通過(guò)內(nèi)置方法就能解析出來(lái)，如果遇到復(fù)雜的就不好辦了，那我們?nèi)绾谓鉀Q復(fù)雜字符串解析那？只能借助正則幫我們解決這個(gè)問(wèn)題。下面介紹一些關(guān)于正則的案例和匹配技巧，廢話不多說(shuō)，直接開(kāi)整。

組名匹配

()表示捕獲分組，() 會(huì)把每個(gè)分組里的匹配的值保存起來(lái)

//  將1999-12-31時(shí)間格式轉(zhuǎn)化為/1999/12/31 
const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/; 
const matchObj = RE_DATE.exec('1999-12-31');
const year = `${matchObj[1]}/${matchObj[2]}/${matchObj[3]}`; //1999/12/31 

• 首先我們看一下(\d{4})
• 其中()說(shuō)明這是一個(gè)組
• 里面的\d{4}表示出現(xiàn)4次的數(shù)組，這樣后面的兩個(gè)組我想我不用介紹你就會(huì)知道了

具名組匹配

具名匹配使用?<GtoupsItemName> 這種形式給每一個(gè)組添加名稱

//  1999-12-31 -> 1999/12/31
const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const matchObj = RE_DATE.exec('1999-12-31');
const year = `${matchObj.groups.year}/${matchObj.groups.month}/${matchObj.groups.day}`;
console.log(year) // 1999/12/31

• (?<year>\d{4}) 將第一個(gè)組命名為year,一次類推其他的也是如此。

關(guān)于組上一部分已經(jīng)介紹的很清楚，具名組就是在表達(dá)式的前面加入<組名稱>，然后按照matchObj.groups.year形式讀取

解構(gòu)賦值

let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
console.log(one,two)  // foo,bar

• ^(?<one>.*) 匹配到:左邊的任意字符串并賦值給one,:右邊的就是two了
• 解構(gòu)賦值就是將匹配到的字符串，賦值到對(duì)應(yīng)的具名組上

替換

通過(guò)具名匹配，使用$<組名>引用具名組，倒到替換效果

// 1999-01-02 -> 02/01/1999
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
let str = '1999-01-02'.replace(re, '$<day>/$<month>/$<year>')
console.log(str) // 02/01/1999

前瞻后顧

前瞻后顧根據(jù)匹配條件匹配出之前或者之后的內(nèi)容，具體分為下面幾種情況，當(dāng)然這幾種情況根據(jù)自己匹配字符串的情況去使用

// 前瞻：
A(?=B)   //查找B前面的A
// 后顧：
(?<=B)A   //查找B后面的A
// 負(fù)前瞻：
A(?!B)   //查找后面不是B的A
// 負(fù)后顧：
(?<!B)A   //查找前面不是B的A

• url解析

https://open.weibanzhushou.com/open-api/chat/message/list?num=aa&key=123aa

最后輸出 num=aa&key=123aa

const reg1 = /(http|https)\:\/\/+(.+\?)(?=(\w))/g
let str = 'https://open.weibanzhushou.com/open-api/chat/message/list?num=aa&key=123aa';
str = str.replace(reg1,'')
console.log(str); // num=aa&key=123aa

• (http|https) 協(xié)議匹配
• \:\/\/特殊符號(hào)的轉(zhuǎn)義主要匹配://
• +(.+\?)匹配url中path
• (?=(\w)) 匹配url中參數(shù)前面是否符合1,2,3三點(diǎn)

捕獲分組

() 會(huì)把每個(gè)分組里的匹配的值保存起來(lái)，使用$n(n是一個(gè)數(shù)字，表示第n個(gè)捕獲組的內(nèi)容)

• 過(guò)濾html標(biāo)簽

str = " asdasd<p>aas</p>asd</br>asda<div>asad</div>asd";

// 最后輸出[' asdasd', 'aas', 'asd', 'asda', 'asad', 'asd ']

 const reg1 = /(\<|\<\/)\w{1,}\>/g; 
 // 等同于 /(\<|\<\/)\w*\>/g 
 // 等同于 /(\<|\<\/)\w+\>/g
    str = str.replace(reg1,'-'); 
    console.log(str.split('-')); //[' asdasd', 'aas', 'asd', 'asda', 'asad', 'asd ']

• (\<|\<\/)將前半部分分為兩種情況,第一種是<,另外一種是</
• \w{1,}\>匹配多次后半部分標(biāo)簽比如p>

• 千分位分隔符 10000->10,000 ，關(guān)于分組中的$&的使用

const reg1 = /\d{1,3}(?=(\d{3}))/;
let num = '10000';
num = num.replace(reg1,'$&,');//10,000 

補(bǔ)充$&,&n知識(shí)點(diǎn)

• $&

表示表示匹配到的字符串

const origin = 'abc1abc' 
const newStr = origin.replace(/\d/g, '<<$&>>');
// newStr = 'abc<<1>>abc

• $n

索引是從1開(kāi)始. 如果不存在第 n個(gè)分組, 那么將會(huì)把匹配到到內(nèi)容替換為字面量. 比如不存在第3個(gè)分組, 就會(huì)用"$3"替換匹配到的內(nèi)容

  const origin = '2022-07-08' 
    const newStr = origin.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1/$2/$3');
    console.log(newStr)

總結(jié)

上面就可以看出正則在我們JS中也很重要，有時(shí)候可能一個(gè)小問(wèn)題就需要用到，就像上面格式化時(shí)間，用到正則直接可以解決，但是也不排除正則是解析字符串的唯一方法，當(dāng)然每個(gè)人的想法不一樣，但是都需要自己去嘗試實(shí)現(xiàn)。

以上就是全面詳解JS正則中匹配技巧及示例的詳細(xì)內(nèi)容，更多關(guān)于JS正則匹配技巧的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論