正則表達式

regular expression : RegExp

用來處理字符串的規則

• 只能處理字符串
• 它是一個規則：可以驗證字符串是否符合某個規則（test),也可以把字符串中符合規則的內容捕獲到（exec/match…）

let str = "good good study,day day up!"; //=>學正則就是用來制定規則(是否包含數字) let reg = /\d+/; reg.test(str); //false str = "2020-07-05"; reg.exel(str); //=>["2020", index: 0, input: "2020-07-05"]

編寫正則表達式

創建方式有兩種

//=>字面兩創建方式（兩個斜杠之間包起來的，都是用來描述規則的元字符） let reg1 = /\d+/; //=>構造函數模式創建 兩個參數：元字符字符串，修飾符字符串 let reg2 = new RegExp("\\d+");

正則表達式由兩部分組成

• 元字符
• 修飾符

/*常用的元字符*///=>1.量詞元字符，設置出現的次數 * 0到多次 + 1到多次 ？ 零次或者一次 {n} 出現n次 {n.} 出現n到多次 {n,m} 出現n到m次//=>2.特殊元字符：單個或者組合在一起代表特殊的含義 \ 轉義字符（普通->特殊->普通） . 除\n（換行符）以外的任意字符 ^ 以哪一個元字符作為開始 $ 以哪一個元字符作為結束 \n 換行符 \d 0~9之間的一個數字 \D 非0~9之間的一個數字 \w 數字、字母、下劃線中的任意一個字符 \s 一個空白字符（包含空格、制表符、換頁符等） \t 一個制表符（一個TAB鍵：四個空格） \b 匹配一個單詞的邊界 x|y x或者y中的一個字符 [xyz] x或者y或者z中的一個字符 [^xy] 除了x/y以外的任意字符 [a-z] 指定a-z這個范圍的任意字符 [0-9a-zA-Z_]===\w [^a-z] 上一個的取反“非” () 正則中的分組符號 (?: ) 只匹配不捕獲 (?=) 正向預查 (?!) 負向預查//=>3.普通元字符：代表本身含義的 /wenlong/ 此正則匹配的就是 “wenlong“ /*正則表達式常用的修飾符：img*/ i => ignoreCase 忽略單詞的大小寫匹配 m => mutiline 可以進行多行匹配 g => global 全局匹配/* /A/.test('lalala') //false /A/i.test('lalala') //true */

元字符詳細解析

^ $

let reg = /^\d/; console.log(reg.test("wenlong")); //false console.log(reg.test("2010wenlong")); //true console.log(reg.test("wenlong2020")); //false let reg = /\d$/; console.log(reg.test("wenlong")); //false console.log(reg.test("2010wenlong")); //false console.log(reg.test("wenlong2020")); //true //=>^/$ 兩個都不加:字符串中包含符合規則的內容即可 let reg1 = /\d+/; //=>^/$ 兩個都加:字符串只能是和規則一致的內容 let reg2 = /^\d+$/;//=> 舉個例子，手機號以1開頭 只能包含11位數字 let reg = /^1\d{10}$/;

\

//=>.不是小數點，是除\n外的任意字符 let reg = /^2.3$/; console.log(reg.test("2.3")); //true console.log(reg.test("2@3")); //true console.log(reg.test("23")); //false//=>基于轉義字符，讓其只代表小數點 let reg = /^2\.3$/; console.log(reg.test("2.3")); //true console.log(reg.test("2@3")); //false console.log(reg.test("23")); //false//=>把特殊符號轉為普通的 let str = "\d"; reg = /^\d$/; console.log(reg.test(str)); //falsereg = /^\\d$/; console.log(reg.test("\\d")); //true

x|y

//=>---直接x|y會存在很亂的優先級問題，一般我們寫的時候都伴隨小括號進行分組，因為小括號改變處理優先級 let reg = /^18|29$/; console.log(reg.test("18")); //true console.log(reg.test("29")); //true console.log(reg.test("129")); //true console.log(reg.test("189")); //true console.log(reg.test("1829")); //true console.log(reg.test("829")); //true console.log(reg.test("182")); //truelet reg = /^(18|29)$/; //只能是18或者29中的一個

[]

//=>1.中括號中出現的字符一般代表本身的含義 let reg = /^[@+]$/; console.log(reg.test("@")); //true console.log(reg.test("+")); //true console.log(reg.test("@@")); //false console.log(reg.test("@+")); //false//=>2. \d在中括號中還是0-9 reg = /^[\d]$/; console.log(reg.test("d")); //false console.log(reg.test("\\")); //false console.log(reg.test("9")); //truereg = /^[\\d]$/; console.log(reg.test("d")); //true console.log(reg.test("\\")); //true console.log(reg.test("9")); //false//=>3. 中括號中不存在多位數 reg=/^[18]$/; console.log(reg.test("1")); //true console.log(reg.test("8")); //true console.log(reg.test("18")); //falsereg=/^[10-29]$/; console.log(reg.test("1")); //true console.log(reg.test("0")); //true console.log(reg.test("2")); //true console.log(reg.test("9")); //true console.log(reg.test("10")); //false

常用的表達式

驗證是否為有效數字

/*規則分析1.可能出現 + - 號，也肯能不出現2.一位0-9都可以，多位首位不能為03.小數部分可能有可能沒有，一旦有后面必須有小數點+數字 */ 0 1 12 12.5 12.0 -1 -12.5 +9 09let reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/; //簡單正則

驗證密碼

let val = userPassInp.value; //=>舉個例子：不用正則 function checkPass(val){if(val.length<6 || val.length>16){alert('長度必須介于6-16位之間!');return;}let area = ['a','b',...,'_']; //包含數字、字母、下劃線for(let i=0,i<val.length;i++){let char = val[i];if(!area.includes(char)){alert('格式不正確！');return;}} } //=>正則寫法 let reg = /^\w{6,16}$/; let flag = reg.test(val); if(flag){alert('格式正確')}else{alert(‘格式不正確’);return;};

驗證真實姓名的

/* 1.漢字 /^[\u4E00-\u9FA5]$/ 中文第一個encode到最后一個 2.名字長度 2～10位 3.可能有譯名 ·漢字exp:"弗拉基米爾·弗拉基米羅維奇·普京" */let reg = /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/;

驗證郵箱的

let reg = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; exp: abcd@qq.com.cn//=> \w+((-\w+)|(\.\w+))* //1.開頭是數字字母下劃線（1到多位） //2.還可以是 -數字字母下劃線 或者 .數字字母下劃線，整體零到多次 //郵箱的名字由“數字、字母、下劃線、-、."幾部分組成，但是-/.不能連續出現也不能作為開始//=> @[A-Za-z0-9]+ //1.@后面緊跟著：數字、字母 （1-多位）//=>((\.|-)[A-Za-z0-9]+)* //對@后面名字的補充 //多域名 .com.cn //企業郵箱 zxt@wenlong-xiaoxuan-office.com//=> \.[A-Za-z0-9]+ //1.這個匹配的是最后的域名（.com/.cn/.org/.edu/.net/.vip...)

身份證號碼

/* 1.一共18位 2.最后一位可能是X身份證前六位：省市縣 130130 中間八位：年月日 19920914 最后四位：最后一位 X或者數字倒數第二位 => 偶數 女 奇數 男其余的都是經過算法算出來的 *///=>小括號分組的第二個作用：分組捕獲，不僅可以把大正則匹配的信息捕獲到，還可以捕獲到每個小分組的內容 let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|X)$/; reg.exec("130828199012040617"); //=>["130828199012040617", "130828", "1990", "12", "04", "1", "7"...] 捕獲結果是數組，包含每一個小分組單獨獲取的內容

正則兩種創建方式的區別

//=>構造函數傳的是字符串，\需要寫兩個才代表斜杠 let reg =/\d+/g; reg = new RegExp("\\d+","g");//=>正則表達式中的部分內容是變量存儲的值 //1.兩個謝崗中間包起來的都是元字符（如果正則中要包含某個變量的值，則不能使用字面量方式創建） let type = "wenlong"; reg = /^@"+type+"@$/; console.log(reg.test("@wenlong@")); //=>false console.log(reg.test('@""""typeeeeeee"@')); //=>true//2.這種情況只能使用構造函數方式（因為它傳遞的規則是字符串，只有這樣才能進行字符串拼接） reg = new RegExp("^@"+type+"@$"); console.log(reg.test("@wenlong@")); //=>true

---

正則的捕獲

實現正則捕獲的方法

• 正則 RegExp.prototype 上的方法
  • exec
  • test
• 字符串 String.ptototype 上支持正則表達式處理的方法
  • replace
  • match
  • splite
  • …

let str = "wenlong2019yangfan2020qihang2021"; let reg = /\d+/; /* 基于exec實現正則的捕獲1.捕獲到的結果是null或者一個數組第一項：本次捕獲到的其余項：對應小分組本次單獨捕獲的內容index：當前捕獲內容在字符串中的起始索引input：原始字符串2.每執行一次，只能捕獲到一個符合正則規則的即 正則捕獲的懶惰性 */ console.log(reg.test(str)); //=>true console.log(reg.exec(str)); //=>["2019", index: 7, input: "wenlong2019yangfan2020qihang2021"] console.log(reg.exec(str)); //=>["2019", index: 7, input: "wenlong2019yangfan2020qihang2021"]//=>解決捕獲的懶惰性修改lastIndex：全局修飾符 exp: let reg = /\d+/g; console.log(reg.exec(str)); //=>["2019", index: 7, input: "wenlong2019yangfan2020qihang2021"] console.log(reg.exec(str)); //=>["2020", index: 18, input: "wenlong2019yangfan2020qihang2021"]//=>實現正則捕獲的前提是：當前正則要和字符串匹配，如果不匹配捕獲的結果是null let reg = /^\d+$/; console.log(reg.test(str)); //=>false console.log(reg.exec(str)); //=>null

正則捕獲懶惰性的解決辦法

~ function () {function execAll(str = "") {if (!this.global) return this.exec(str);let ary = [],res = this.exec(str);while (res) {ary.push(res[0]);res = this.exec(str);}return ary.length === 0 ? null : ary;}RegExp.prototype.execAll = execAll; }(); let reg = /\d+/g; let str = "wenlong2019yangfan2020qihang2021"; // 正則添加原型方法 console.log(reg.execAll(str));// 相當于字符串方法 console.log(str.match(reg))

正則的分組捕獲

//=>身份證號碼 let str = "130828199012040112"; let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(?:\d|X)$/; console.log(reg.exec(str)); console.log(str.match(reg)); //=>["130828199012040112", "130828", "1990", "12", "04", "1",, index: 0, input: "130828199012040112"] /* 第一項：大正則匹配的結果 其余項：每一個小分組單獨匹配捕獲的結果 如果設置了分組（改變優先級），但是捕獲的時候不需要單獨捕獲，可以基于?:來處理 */ //=>既要捕獲到{數字}，也想單獨的把數字也獲取到，例如：第一次找到{0} 還需要單獨獲取0 let str = "{0}年{1}月{2}日";//=>不設置g匹配一次，exec和match獲取的結果一致（既有大正則匹配的信息，也有小分組匹配的信息） let reg = /\{(\d)+\}/; console.log(reg.exec(str)); console.log(str.match(reg)); //=>["{0}", "0"]//=> let reg = /\{(\d)+\}/g; console.log(reg.exec(str)); console.log(str.match(reg)); //=>["{0}", "{1}", "{2}"] 多次匹配，match只能把大正則匹配的內容獲取到，小分組匹配的信息無法獲取let aryBig = [],arySmall = [],res = reg.exec(str); while(res){let [big,small] = res;aryBig.push(big);arySmall.push(small);res=reg.exec(str); } console.log(aryBig,arySmall); //=>["{0}", "{1}", "{2}"] ["0", "1", "2"] //=>分組引用 let str = "book"; //=>"good"、"look"、"moon"、"foot"... let reg = /^[a-zA-Z]([a-zA-Z])\1[a-zA-Z]$/; //=>分組引用就是通過“\數字“讓其代表和對應數組出現一模一樣的內容 console.log(reg.test("book")); //=>true console.log(reg.test("keep")); //=>true console.log(reg.test("buss")); //=>false console.log(reg.test("some")); //=>false

正則捕獲的貪婪性

//=>默認情況下，正則捕獲到的時候，是按照當前正則所匹配的最長結果來獲取的 let str = "珠峰@2019#@2020培訓"; let reg = /\d+/g; console.log(str.match(reg)); //=>["2019","2020"]//=>在量詞元字符后面設置? 取消捕獲時候的貪婪性（按照匹配的最短的結果來獲取） let reg = /\d+?/g; console.log(str.match(reg)); //=>["2", "0", "1", "9", "2", "0", "2", "0"]

問號在正則中的五大作用

• 問號左邊是非量詞元字符：本身代表量詞元字符，出現零到一次
• 問號左邊是量詞元字符：取消捕獲時候的貪婪性
• (?: ) 只匹配不捕獲
• (?=) 正向預查
• (?!) 負向預查

()三大作用

• 改變優先級
• 分組捕獲
• 分組引用

---

其它正則捕獲的方法

test 也能捕獲（本意是匹配）

let str = "{0}年{1}月{2}日"; let reg = /\{(\d+)\}/g; console.log(reg.test(str)); //=>true console.log(RegExp.$1); //=>"0"console.log(reg.test(str)); //=>true console.log(RegExp.$1); //=>"1"console.log(reg.test(str)); //=>true console.log(RegExp.$1); //=>"2"console.log(reg.test(str)); //=>false console.log(RegExp.$1); //=>"2" //=>"2" 存儲的是上次捕獲的結果//=>RegExp.$1~RegExp.$9：獲取當前本次正則匹配后，第一個列到九個分組的信息

replace 字符串實現替換的方法（一般都是伴隨正則一起使用的）

let str = "wenlong@2019|wenlong@2020"; //=>把“wenlong”替換成“珠峰” //1.不用正則，執行一次只能替換一個 str = str.replace("wenlong","珠峰").replace("wenlong","珠峰"); console.log(str); //2.使用正則會簡單一點 str = str.replace(/wenlong/g,"珠峰"); console.log(str); let str = "wenlong@2019|wenlong@2020"; //=>把“wenlong"替換成“wenlongxiaoxuan"; str = str.replace("wenlong","wenlongxiaoxuan").replace("wenlong","wenlongxiaoxuan"); //=>"wenlongxiaoxuanxiaoxuan@2019|wenlong@2020" //=>每一次替換都是字符串第一個位置開始找的（類似于正則捕獲的懶惰性）//=>基于正則g可以實現 str = str.replace(/wenlong/g,"wenlongxiaoxuan");

案例：把時間字符串進行處理

let time = "2019-08-13"; //=>變為"2019年08月13日" let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;//=>這樣可以實現 time = time.replace(reg,"$1年$2月$3日"); console.log(time); //=>2019年08月13日//=>還可以這樣處理[str].replace([reg],[fuction]) 1.首先拿reg和time進行匹配捕獲，能匹配到幾次就會把傳遞的函數執行幾次（而且是匹配一次就執行一次） 2.不僅把方法執行，而且replace還給方法傳遞了實參信息（和exec捕獲的內容一致的信息：大正則匹配的內容，小分組匹配的信息。。。） 3.在函數中我們返回的是啥，就把當前大正則匹配的內容替換成啥time = time.replace(reg,(big,$1,$2,$3)=>{//=>這里的$1,$2,$3是我們自己設置的變量console.log(big,$1,$2,$3); });time = time.replace(reg,(...arg)=>{let [,$1,$2,$3] = arg;$2.length<2?$2="0"+$2:null;$3.length<3?$3="0"+$3:null;return $1+"年"+$2+"月"+$3+"日"; })

單詞首字母大寫

let str = "good good study,day day up!" let reg = /\b([a-zA-z])[a-zA-Z]*\b/g; //=>函數被執行了六次，每一次都把正則匹配信息傳遞給函數 //=>每一次reg：["good","g"] ["good","g"] ["study","s"]...str = str.replace(reg,(...flag)=>{let [big,$1] = flag;console.log(flag,$1); //=> flag大正則匹配的內容，$1自定義小分組匹配的信息$1 = $1.toUpperCase();big = big.substring(1);return $1+big; })

找出字符串中出現次數最多的值

//=>數組去重方式實現 let str = "wenlongxiaoxuanzhoulaoshi"; let obj = {}; [].forEach.call(str, char => {if (typeof obj[char] !== "undefined") {obj[char]++;return;}obj[char] = 1; }); let max = 1,res = []; for (let key in obj) {let item = obj[key];item > max ? max = item : null; } for (let key in obj) {let item = obj[key];if (item === max) {res.push(key);} } console.log(`出現次數最多的字符是：${res},出現了${max}次`); //=>排序加正則方式實現 let str = "wenlongxiaoxuanzhoulaoshi"; str = str.split('').sort((a, b) => a.localeCompare(b)).join(''); let ary = str.match(/([a-zA-Z])\1+/g).sort((a, b) => b.length - a.length); console.log(ary); //=>["hhh", "uuu", "ee", "ii", "nn", "oo"zz"] let max = ary[0].length,res = [ary[0].substr(0, 1)]; for (let i = 1; i < ary.length; i++) {let item = ary[i];if (item.length < max) {break;}res.push(item.substr(0, 1)); } console.log(`出現次數最多的字符是：${res},出現了${max}次`);

寫到最后

本文章為個人正則學習記錄，純手打，轉載請注明出處。

總結

以上是生活随笔為你收集整理的一小时学会js正则表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。