欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

全面詳解JS正則中匹配技巧及示例

 更新時間：2023年01月04日 11:25:35   作者：摸魚的湯姆  
這篇文章主要為大家介紹了全面詳解JS正則中匹配技巧及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

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

組名匹配

()表示捕獲分組，() 會把每個分組里的匹配的值保存起來

//  將1999-12-31時間格式轉(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})
  • 其中()說明這是一個組
  • 里面的\d{4}表示出現(xiàn)4次的數(shù)組，這樣后面的兩個組我想我不用介紹你就會知道了

具名組匹配

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

//  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}) 將第一個組命名為year,一次類推其他的也是如此。

關(guān)于組上一部分已經(jīng)介紹的很清楚，具名組就是在表達式的前面加入<組名稱>，然后按照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)賦值就是將匹配到的字符串，賦值到對應(yīng)的具名組上

替換

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

// 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)容，具體分為下面幾種情況，當然這幾種情況根據(jù)自己匹配字符串的情況去使用

// 前瞻：
A(?=B)   //查找B前面的A
// 后顧：
(?<=B)A   //查找B后面的A
// 負前瞻：
A(?!B)   //查找后面不是B的A
// 負后顧：
(?<!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é)議匹配
  • \:\/\/特殊符號的轉(zhuǎn)義主要匹配://
  • +(.+\?)匹配url中path
  • (?=(\w)) 匹配url中參數(shù)前面是否符合1,2,3三點

捕獲分組

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

  • 過濾html標簽

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,}\>匹配多次后半部分標簽比如p>
  • 千分位分隔符 10000->10,000 ，關(guān)于分組中的$&的使用
const reg1 = /\d{1,3}(?=(\d{3}))/;
let num = '10000';
num = num.replace(reg1,'$&,');//10,000

補充$&,&n知識點

  • $&

表示表示匹配到的字符串

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

索引是從1開始. 如果不存在第 n個分組, 那么將會把匹配到到內(nèi)容替換為字面量. 比如不存在第3個分組, 就會用"$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中也很重要，有時候可能一個小問題就需要用到，就像上面格式化時間，用到正則直接可以解決，但是也不排除正則是解析字符串的唯一方法，當然每個人的想法不一樣，但是都需要自己去嘗試實現(xiàn)。

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

相關(guān)文章

最新評論