2019年11月23日 星期六

【.js】常用正規表達式|javascript萬用字元regEx

正規表達式(regEx / regular Expression)|javascript

簡單說就是萬用符號,就像是excel裡面可以用*表達任一字元一樣,常用在比對字串,查找字串,分割字串等等。

下面這是一個簡單的例子,你可以在框框裡面輸入你要查找的字串跟萬用表達式來嘗試。

要先提一下,match()這個函式是會回傳匹配到的陣列ex([1,2,ace]),所以按執行了以後跳出的對話框,物件跟物件會被","給分開,所以要自己判斷一下,到底有沒有包含在搜尋結果裡。

  function alert_result() {
     var str = ;
     var regEx = / /g;
  alert(str.match(regEx));
  }

常用萬用符號
* 前面的字元比對零次到多次,例如:a*可以是a、aa、aaa、aaaa,[ab]*可以是a,ab,aab,bba,abab
? 零次或是一次,或是非貪婪模式,下面詳細介紹
+ 一次或是多次,功能跟{1,}一樣
. 當作任何的字元
\s 全部的空白跟換行
\S 所有的『非』空白跟換行
\d 所有的數字
\D 所有的『非』數字
\w 所有英文數字或是底線
\w 所有『非』英文數字或是底線
\ 後面的字元當作原始字元,例如\/指的是/,\]指的是]
()\1 指的是前面那個字元判斷兩次,例如(2)\1指的是22,[^-]\1可以是22、aa、??等等
{1} 指的是前面那個字元判斷1次,例如1{1}指的是1
[^] 不包含後面字元的其他字元,例如[^-]指不是-的其他字元
[^;a@] 當^後面有不只一個字元的時候,還是一次判斷一個字元,但是那個字元不能是;,a,@任何一個
[;a@] 一次判斷一個字元,但是那個字元必須是;,a,@任一個
[a-zA-Z] 一次判斷一個字元,而且是小寫或是大寫的英文,由此可知-也是特殊符號,如果想單獨判斷要加\
(?!abc)[str] 環視結構排除,右側排除有序字串,我們下一篇詳細講
(?<!abc)[str] 環視結構排除,『左側』排除有序字串,我們下一篇詳細講
(?=) 環視結構,包含當前字串右側要出現有序字串

非貪婪模式

非貪婪模式白話來說是,盡可能在第一個狀況成立的時候跳出,例如在<div><div>123</div></div>中尋找<div>.*</div>會找到<div><div>123</div></div>,但是用<div>.*?</div>找就會找到<div><div>123</div>,

學術一點的概念是把數量優先不匹配,說如果是在abc0a1a2a裡面找/ab.*?a/的話,他會先配對/ab.*?a/的第一個a,成功找到開頭的a,然後配對/ab.*?a/的b,找到目標裡面的b,然後找/ab.*?a/最後的a,跳過中間的.*?因為是優先不匹配,然後發現abc不行配對上,所以回去配對.再繼續往下以此類推,直到abc0a配對/ab..a/中了,就跳出

用下面表格來展現一下

目標 abc0a1a2a /ab.*?a/
步驟一 a /a/ 可以,繼續往下
步驟二 ab /ab/ 可以,繼續往下,但是先跳過.*?
步驟三 abc /aba/ 不行,往回加入優先跳過的.
步驟四 abc /ab./ 可以,繼續往下,但是先跳過.*?
步驟五 abc0 /ab.a/ 不行,往回加入優先跳過的.
步驟六 abc0 /ab../ 可以,繼續往下
步驟七 abc0a /ab..a 可以,完成尋找,就跳出因為是非貪婪模式!

正規表達式2一次比對多個字串