全面詳解JS正則中匹配技巧及示例
引言
在做項目的時候難免會遇到很多奇葩解析字符串的需求，簡單的字符串通過內置方法就能解析出來，如果遇到復雜的就不好辦了，那我們如何解決復雜字符串解析那？只能借助正則幫我們解決這個問題。下面介紹一些關于正則的案例和匹配技巧，廢話不多說，直接開整。
組名匹配
()表示捕獲分組，() 會把每個分組里的匹配的值保存起來
// 將1999-12-31時間格式轉化為/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,一次類推其他的也是如此。
關于組上一部分已經介紹的很清楚，具名組就是在表達式的前面加入<組名稱>，然后按照matchObj.groups.year形式讀取
解構賦值
let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
console.log(one,two) // foo,bar
^(?<one>.*)匹配到:左邊的任意字符串并賦值給one,:右邊的就是two了- 解構賦值就是將匹配到的字符串，賦值到對應的具名組上
替換
通過具名匹配，使用$<組名>引用具名組，倒到替換效果
// 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ù)匹配條件匹配出之前或者之后的內容，具體分為下面幾種情況，當然這幾種情況根據(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é)議匹配\:\/\/特殊符號的轉義主要匹配://+(.+\?)匹配url中path(?=(\w))匹配url中參數(shù)前面是否符合1,2,3三點
捕獲分組
() 會把每個分組里的匹配的值保存起來，使用$n(n是一個數(shù)字，表示第n個捕獲組的內容)
- 過濾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 ，關于分組中的
$&的使用
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個分組, 那么將會把匹配到到內容替換為字面量. 比如不存在第3個分組, 就會用"$3"替換匹配到的內容
const origin = '2022-07-08'
const newStr = origin.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$1/$2/$3');
console.log(newStr)
總結
上面就可以看出正則在我們JS中也很重要，有時候可能一個小問題就需要用到，就像上面格式化時間，用到正則直接可以解決，但是也不排除正則是解析字符串的唯一方法，當然每個人的想法不一樣，但是都需要自己去嘗試實現(xiàn)。
以上就是全面詳解JS正則中匹配技巧及示例的詳細內容，更多關于JS正則匹配技巧的資料請關注腳本之家其它相關文章！
相關文章
最近在做一個項目，需要JS時間戳轉成C#里的時間，再把C#里的時間戳轉成JS的時間,就仔細研究了下js與C#進行轉換的注意要點，這里記錄下來，有需要的小伙伴自己拿走。2014-11-11
基于layui的table插件進行復選框聯(lián)動功能的實現(xiàn)方法
今天小編就為大家分享一篇基于layui的table插件進行復選框聯(lián)動功能的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)移動端拖動元素，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了webpack 處理CSS資源的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
為什么JavaScript中0.1 + 0.2 != 0.3
這篇文章主要給大家介紹了關于為什么JavaScript中0.1 + 0.2 != 0.3的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
原生JavaScript實現(xiàn)Tooltip浮動提示框特效
這篇文章主要為大家詳細介紹了原生JavaScript設計和實現(xiàn)Tooltip浮動提示框特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細介紹了如何通過微信小程序開發(fā)一個簡單的別踩白塊游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以和小編一起學習一下2023-02-02
經過這么多年的發(fā)展，JavaScript 早已經不是當年那個不太起眼的腳本語言。如今的 JavaScript 可以說是風光無限，在 Web 前端、移動端、服務端甚至物聯(lián)網(wǎng)設備上都大展身手，到處都有它的身影。2021-05-05
這篇文章主要為大家詳細介紹了Javascript和jQuery的深淺拷貝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要介紹了webpack打包優(yōu)化的幾個方法總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02