全面詳解JS正則中匹配技巧及示例
引言
在做項(xiàng)目的時(shí)候難免會遇到很多奇葩解析字符串的需求,簡單的字符串通過內(nèi)置方法就能解析出來,如果遇到復(fù)雜的就不好辦了,那我們?nèi)绾谓鉀Q復(fù)雜字符串解析那?只能借助正則幫我們解決這個(gè)問題。下面介紹一些關(guān)于正則的案例和匹配技巧,廢話不多說,直接開整。
組名匹配
()表示捕獲分組,() 會把每個(gè)分組里的匹配的值保存起來
// 將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}) - 其中
()說明這是一個(gè)組 - 里面的
\d{4}表示出現(xiàn)4次的數(shù)組,這樣后面的兩個(gè)組我想我不用介紹你就會知道了
具名組匹配
具名匹配使用?<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)賦值就是將匹配到的字符串,賦值到對應(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)容,具體分為下面幾種情況,當(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é)議匹配\:\/\/特殊符號的轉(zhuǎn)義主要匹配://+(.+\?)匹配url中path(?=(\w))匹配url中參數(shù)前面是否符合1,2,3三點(diǎn)
捕獲分組
() 會把每個(gè)分組里的匹配的值保存起來,使用$n(n是一個(gè)數(shù)字,表示第n個(gè)捕獲組的內(nèi)容)
- 過濾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知識點(diǎn)
- $&
表示表示匹配到的字符串
const origin = 'abc1abc' const newStr = origin.replace(/\d/g, '<<$&>>'); // newStr = 'abc<<1>>abc
- $n
索引是從1開始. 如果不存在第 n個(gè)分組, 那么將會把匹配到到內(nèi)容替換為字面量. 比如不存在第3個(gè)分組, 就會用"$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è)小問題就需要用到,就像上面格式化時(shí)間,用到正則直接可以解決,但是也不排除正則是解析字符串的唯一方法,當(dāng)然每個(gè)人的想法不一樣,但是都需要自己去嘗試實(shí)現(xiàn)。
以上就是全面詳解JS正則中匹配技巧及示例的詳細(xì)內(nèi)容,更多關(guān)于JS正則匹配技巧的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于layui的table插件進(jìn)行復(fù)選框聯(lián)動功能的實(shí)現(xiàn)方法
今天小編就為大家分享一篇基于layui的table插件進(jìn)行復(fù)選框聯(lián)動功能的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實(shí)現(xiàn)移動端拖動元素
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)移動端拖動元素,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11
為什么JavaScript中0.1 + 0.2 != 0.3
這篇文章主要給大家介紹了關(guān)于為什么JavaScript中0.1 + 0.2 != 0.3的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
原生JavaScript實(shí)現(xiàn)Tooltip浮動提示框特效
這篇文章主要為大家詳細(xì)介紹了原生JavaScript設(shè)計(jì)和實(shí)現(xiàn)Tooltip浮動提示框特效,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
微信小程序開發(fā)之實(shí)現(xiàn)別踩白塊游戲
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡單的別踩白塊游戲,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-02-02
webpack打包優(yōu)化的幾個(gè)方法總結(jié)
這篇文章主要介紹了webpack打包優(yōu)化的幾個(gè)方法總結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02

