高級正則實例

如何學好正則,一直是我苦惱的事情,有時候我本身的寫的正則,本身也不太明白因此然,抱着試試的態度html

可是我真的很想學好,這裏我都會以實例出來,對每一道正則都寫上本身的理解(基礎部分我就不寫,儘可能寫一些小細節的點)webpack

部分會參考我看的< <正則指引> > web

多選

豎線| 分隔多選,可是|的優先級特別低,能夠用括號把他包起來數組

複雜些|簡單寫svn

專門爲捕獲組設計的exec

超級強大,惋惜我今天才發現(2019/05/10)函數

默認返回的匹配的項,其餘匹配的經過是分組的內容,經過[]獲取url

let str = "aaabbb";
/*能夠匹配到分組的內容*/
let reg=/(a+)(?:b+)/g;
let res = reg.exec(str);
console.log(res[1]);

let str = "cccddd";
/*能夠匹配到分組的內容*/
let reg=/(c+)(d+)/g;
let res = reg.exec(str);
console.log(res[1]);

比較好的入門資料連接

replace

第二個參數是函數
let url = "https://www.baidu.com?a=1&b=2";
let reg=/([^&#?+]+)=([^&?#+]+)/g;
let obj = {};
//$0  返回總體  $1返回第一個分組  $2 返回第二個分組
url.replace(reg, ($0,$1, $2) => obj[$1] = $2);
console.log(obj);

反向引用

\1 到\10
console.log('aaa bbbb ffffff 999999999'.match(/(\w)(?=\1\1\1)(\1)+/g));

反向引用的做用一般是用來查找或限定重複、查找或限定指定標識配對
([a-z])\1{2}
忽略分組  ?:
正向斷言  ?=
反向斷言  ?!
    test  判斷return false
    exec  查看分組
    search  返回第一個匹配的索引 到不到 -1
    match  返回數組
    split
    replace
//找到重複的單詞
const str = 'This is the theater you you have been to to';
str.replace(/\b([a-z]+)\s\1\b/ig,(match,...args)=>{
  console.log(args[0]);
})

環視(多查資料)

環視,在不一樣的地方又稱之爲零寬斷言,簡稱斷言。
?=P   可定順序
?!P   否認順序
?<=P  確定逆序
?<!P  否認逆序

console.log(/(http|ftp|svn|abc)ddd/g.test('httpddd'));

 定錨點

.*?  若是換行失敗 改爲 [\s\S]*?

正整數+一位小數設計

console.log(/^[+]?[1-9]\d*(?:\.\d)?$/.test('+2.1'));

環視

?=P 確定 ?!P 否認code

(?=A)[A-Z]htm

(?=A) 所在的位置,後面是A

[A-Z] 匹配A-Z中任意一個字母

組合起來

從左到右正則分別匹配環視(?=A)[A-Z] ,因爲環視不消耗正則的匹配字符,由於還能對A進行匹配

let s1='abcd abcd abbdABCD';
    console.log(s1.match(/(?=a)[a-z]/g)); // ["a","a","a"]
字母序列後面跟着;
    let s1='aaaa;bbb;cccc;dddd;';
    console.log(s1.match(/[a-z]+(?=;)/g)); //["aaaa", "bbb", "cccc", "dddd"]
常規匹配   
    let s1 = 'notexefile1.exe';
    console.log(/.+(?=\.exe)/g.exec(s1)); //notexefile1

變種用法

確定變種

需求包含字母(不區分大小寫),數字,6-16爲密碼
^(?=.*?[a-zA-Z])(?=.*?[0-9])[a-zA-Z0-9]{6,16}$
  講解
  使用(?=.*?[a-zA-Z])限定後面的字符中至少有一個字母
    使用(?=.*?[0-9])限定後面的字符中至少有一個數字
    最後經過實際匹配正則[a-zA-Z0-9]{6,16}限定量詞
    
否認變種

獲取不是.exe後綴文件不含後綴的文件名 
正則:(.+)(?!\.exe)\.[^.]+$ 

確定逆序 (?<=P)

js不支持,可是好像是用webpack的時候是支持的
需求:獲取name參數的值 
正則:(?<=name=).+
示例很直白,前面必須是name=,而後獲取其後面的數據  
      let s1 = 'name=Zjmainstay';
    console.log(/(?<=name=).+/g.exec(s1));// Zjmainstay

正則分塊組合法-必須包含字母、數字、特殊字符

正則:^(?=.*?[a-z])(?=.*?\d)(?![a-z\d]+$).+$

解析:  (?=.*?[a-z])限制必須有字母

(?=.*?\d)限制必須有數字

(?![a-z\d]+$)限制從開頭到結尾不能全爲數字和字母

.+在沒有限定的狀況下能夠是任意字符  ^$ 限定字符串的開頭和結尾

正則逐步完善法-排除特定標籤p/a/img,匹配html標籤

正則:</?(?!p|a|img)([^> /]+)[^>]*/?>

從簡單標籤入手,對於</p><br />,寫出正則:  </?[^>]*/?>

咱們觀察可得,標籤名是這樣獲得的:

無屬性值:<p>           <([^>]+)
有屬性值:<p class      <([^ ]+)
無屬性值自閉合:<br/>   <([^/]+)
閉合標籤:</p>          </([^>]+)>

獲得正則:

</?([^> /]+)

最後,咱們須要排除p/a/img標籤,用否認順序法,在標籤名前面加入否認環視:  </?(?!p|a|img)([^> /]+)[^>]*/?>

正則減除查錯法-匹配異常緣由查找

<ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item bug">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
</ul>

正則:<li class="item">(.*?)</li>

問題"item bug" 怎麼解決

正則<li class="item[^"]*"

最終的正則<li class="item[^"]*">(.*?)</li>

正則練習題

https://www.zybuluo.com/Zjmainstay/note/709093

匹配個數爲偶數且不能爲空

/^(..)+$/

正則查找不包含某些字符串

^((?!不想包含的字符串).)*$

解釋
(?!不想包含的字符串)   //是匹配位置
.是任意字符
表達式(?!hede).只執行一次
匹配0次或屢次:((?!hede).)*

需求:匹配每行數據中以.jpg/.jpeg/.png/.gif結尾的圖片名稱(含後綴)

.+(?=\.(jpg|jpeg|png|gig)).+

......................................................................................................................................................................................................................................................................................................................................................................................................................

相關文章
相關標籤/搜索