JavaScript--正則表達式

時間 2019-11-12

原文原文鏈接

語法

var reg = new RegExp(pattern, modifiers)
或者更簡單的方式：
var reg = /pattern/modifiers

pattern(模式)描述了表達式的模式javascript

modifiers(修飾符)用於指定全局匹配、區分大小寫的匹配和多行匹配java

注意：當使用構造函數（new RegExp()）建立正則對象時，須要常規的字符轉義規則(在前面加反斜槓\)。好比，如下是等價的正則表達式

var reg = new RegExp('\\d+');
var reg = /\d+/;

經常使用方法

reg.test(str) => 按照規則校驗字符串是否符合，返回true/false
str.match(reg) => 在字符串中按照規則查找，返回數組
str.search(reg) => 在字符串中按照規則查找，返回(第一個符合條件的)下標數組

注：str是字符串，reg是正則表達式瀏覽器

修飾符(可隨意組合)

i 執行對大小寫不敏感(不區分)的匹配。
g 執行全局匹配（查找全部匹配而非在找到第一個匹配後中止）。
m 執行多行匹配。app

注意事項： m修飾符的做用是修改^和$在正則表達式中的做用，讓它們分別表示行首和行尾。
在默認狀態下，一個字符串不管是否存在換行符(\n)只有一個開始^和結尾$，若是採用多行匹配，那麼每個換行符(\n)都有一個^和結尾$。函數

var str = 'This TEACHER is very good at teaching.\n Students like her VERY much.'字體

var reg = /er/
console.log(str.match(reg)) //[er] => (very)this

var reg1 = /er/i
console.log(str.match(reg1)) //[ER] => (TEACHER)spa

var reg2 = /er/g
console.log(str.match(reg2)) //[er, er] => (very, her)

var reg3 = /er$/m
console.log(str.match(reg3)) //null

var reg4 = /er/ig
console.log(str.match(reg4)) //[ER, er, er, ER] => (TEACHER, very, her, VERY)

var reg5 = /er$/im
console.log(str.match(reg5)) //null

var reg6 = /er$/gm
console.log(str.match(reg6)) //null

var reg7 = /er$/igm
console.log(str.match(reg7)) //null

第一種，無修飾符，將匹配 'er' ，若是匹配到就顯示，匹配不到顯示null

第二種，加了修飾符i，不區分大小，便可以匹配的類型應該有 'er' , 'eR' , 'Er' , 'ER'

第三種，加了修飾符g，全局匹配，即將全部 'er' 找出來

第四種，加了修飾符m，多行匹配，上面注意事項介紹了，在js代碼中 ‘\n’ 是換行符，修飾符m只對開頭'^'和結尾'$' 這兩種量詞進行多行匹配，即在使用修飾符m的狀況下，碰到 '\n' 後，就至關於在其前多了一個結尾 '$'，在其後面多了一個開頭 ‘^’,這樣說可能不夠清楚，看下面分析，將上面demo拿來具體問題具體分析

var str = 'This TEACHER is very good at teaching.\n Students like her VERY much.'
var reg3 = /er$/m
console.log(str.match(reg3)) //null

其實，一開始看到結果是null，我也是一愣，匹配不到？好吧，分析看看，請看我上面說的（紅色字體或者查看注意事項），恩，'\n'？在str裏面是存在，那麼根據上面的意思，上面的代碼在修飾符m的做用下就變成，下面用截圖來展現

看到我上面截圖加的結尾符和開頭符，是否是有點理解了呢，恩，那麼開始按照匹配條件進行匹配， 'er$' , 字符串(str)中最後以$結束前兩位字符是'er'的有嗎？並無符合要求的，因此就返回null，若是換成英文的小數點 'g.'或 'h.' 就可找到，不信的能夠試試。

var str = 'This TEACHER is very good at teaching.\n Students like her VERY much.'
var reg3 = /g.$/m
console.log(str.match(reg3)) // [ 'g.' ] => (teaching.)

var str = 'This TEACHER is very good at teaching.\n Students like her VERY much.'
var reg3 = /h.$/m
console.log(str.match(reg3)) // [ 'h.' ] => (much.)

相信，前面這幾種分析完後，後面的你們一看就可以明白，後面的就不浪費口舌了，你們自行消化。（相信你們都是大牛，不用來看我寫的博客）

方括號

[abc] 查找方括號之間的任何字符。
[^abc] 查找任何不在方括號之間的字符。
[0-9] 查找任何從 0 至 9 的數字。
[a-z] 查找任何從小寫 a 到小寫 z 的字符。
[A-Z] 查找任何從大寫 A 到大寫 Z 的字符。
[A-z] 查找任何從大寫 A 到小寫 z 的字符。
(red|blue|green) 查找任何指定的選項。

// [abc]:
var str = 'this is RegExp grammar'
var reg = /[a-g]/g
console.log(str.match(reg)) // [ "e", "g", "g", "a", "a" ]

// [^abc]:
var str = 'this is RegExp grammar'
var reg = /[^a-g]/g
console.log(str.match(reg)) // ["t", "h", "i", "s", " ", "i", "s", " ", "R", "E", "x", "p", " ", "r", "m", "m", "r"]

// [0-9]:
var str = 'sd12452asdfd'
var reg = /[0-9]/g
console.log(str.match(reg)) // ["1", "2", "4", "5", "2"]

// [a-z]:
var str = 'sd12452asdfd'
var reg = /[a-z]/g
console.log(str.match(reg)) // ["s", "d", "a", "s", "d", "f", "d"]

// [A-Z]:
var str = 'sd12452Asdfd'
var reg = /[A-Z]/g
console.log(str.match(reg)) // ["A"]
// (ab|bc|cd):
var str = 'abcad'
var reg = /(bc|ab|cd)/g
console.log(str.match(reg)) // ["ab"]

這些都是很簡單的匹配，相信你們一看就能明白。這裏就只給出說明和例子，下面開始要集中精神啦。

元字符

. 查找單個字符，除了換行和行結束符。(注：行結束符在Linux和Windows是不一樣的，Linux是 '\n', Windows是 '\r\n',這個須要注意)
\w 查找單詞字符。(單詞字符包括：a-z、A-Z、0-9，以及下劃線, 包含 _ (下劃線) 字符。)
\W 查找非單詞字符。
\d 查找數字。
\D 查找非數字字符。
\s 查找空白字符。( '\t', ' ', '\r', '\n', '\v', '\f')
\S 查找非空白字符。
\b 匹配單詞邊界。(查找位於單詞的開頭或結尾的匹配。)
\B 匹配非單詞邊界。
\0 查找 NULL 字符。
\n 查找換行符。
\f 查找換頁符。
\r 查找回車符。
\t 查找製表符。
\v 查找垂直製表符。
\xxx 查找以八進制數 xxx 規定的字符。
\xdd 查找以十六進制數 dd 規定的字符。
\uxxxx 查找以十六進制數 xxxx 規定的 Unicode 字符。

上面是說明介紹，下面咱們逐一分析

. 查找單個字符，除了換行和行結束符。

// new RegExp('regexp.') or /regexp./

var str = 'That is hot'
var reg = /h.t/g
console.log(str.match(reg))  // [hat, hot] => (That, hot)

var str = 'Tha\nt is hot'
var reg = /.t/g
console.log(str.match(reg)) // [ot] => (hot)

\w 查找單詞字符。單詞字符包括：a-z、A-Z、0-9，以及下劃線, 包含 _ (下劃線) 字符。

// new RegExp('\w') or /\w/

var str = 'this is word, this is ￥'
var reg = /\w/
console.log(str.match(reg)) // [t] 
var reg = /\w/g
console.log(str.match(reg)) // ["t", "h", "i", "s", "i", "s", "w", "o", "r", "d", "t", "h", "i", "s", "i", "s"]

\W 查找非單詞字符。單詞字符包括：a-z、A-Z、0-9，以及下劃線, 包含 _ (下劃線) 字符。

// new RegExp('\W') or /\W/

var str = 'this is word, this is ￥'
var reg = /\W/
console.log(str.match(reg)) // [ '' ]
var reg = /\W/g
console.log(str.match(reg)) // [ ' ', ' ', ',', ' ', ' ', ' ', '￥' ]

\d 查找數字。

// new RegExp('\d') or /\d/

var str = 'please pay me 100'
var reg = /\d/g
console.log(str.match(reg)) // [ "1", "0", "0" ]

\D 查找非數字字符。

// new RegExp('\D') or /\D/

var str = 'please pay me 100'
var reg = /\D/g
console.log(str.match(reg)) // ["p", "l", "e", "a", "s", "e", " ", "p", "a", "y", " ", "m", "e", " "]

\s 查找空白字符。

// 空格符    => ' '     (space character) 
// 製表符    => '\t'    (tab character)
// 回車符    => '\n'    (carriage return character)
// 換行符    => '\r'    (new line character)
// 垂直換行符 => '\v'    (vertical tab character)
// 換頁符    => '\f'    (form feed character)
// new RegExp('\s') or /\s/

var str = ' \n\r\v\f'
var reg = /\s/g
console.log(str.match(reg))

結果在谷歌和火狐的展現是不一樣的，可是結果是同樣的。

谷歌：

火狐：

\S 查找非空白字符。

// 空格符 (space character)
// 製表符 (tab character)
// 回車符 (carriage return character)
// 換行符 (new line character)
// 垂直換行符 (vertical tab character)
// 換頁符 (form feed character)
// new RegExp('\s') or /\s/

// new RegExp('\S') or /\S/

var str = 'please pay me 100 !\n'
var reg = /\S/g
console.log(str.match(reg)) // ["p", "l", "e", "a", "s", "e", "p", "a", "y", "m", "e", "1", "0", "0", "!"]

\b 匹配單詞邊界。查找位於單詞的開頭或結尾的匹配。

//     new RegExp('\b') or /\b/

var str="JavaScript and testJava, thisisJavaScript."; 
var patt1=/\bJava/g; //只要以Java開頭就能匹配到
var patt2=/Java\b/g;    //只要以Java結束就能匹配到
console.log(str.match(patt1)); // [Java] => (JavaScript)
console.log(str.match(patt2))  // [Java] => (testJava)

\B 匹配非單詞邊界。

//     new RegExp('\B') or /\B/

var str="JavaScript and testJava, thisisJavaScript."; 
var patt1=/\BJava/g; //只要不是以Java開頭就能匹配到
var patt2=/Java\B/g;    //只要不是以Java結束就能匹配到
console.log(str.match(patt1)); //[Java, Java] => (testJava, thisisJavaScript)
console.log(str.match(patt2))  //[Java, Java] => (JavaScript, thisisJavaScript)

\0: 用於匹配轉義字符 '\0'(空字符) => 空字符不等於空白符 [\t \n \x0B \f \r]

\n 查找換行符。

\f 查找換頁符。

\r 查找回車符。

\t 查找製表符。

\v 查找垂直製表符。

上面這幾個比較簡單，都是正經常使用法，就不介紹了。

\xxx: 用於查找以八進制數 xxx 規定的字符。

//     new RegExp('\xxx') or /\xxx/

var str="this is javascript"; 
var reg=/\141/g; 
console.log(str.match(reg)); // [a, a] => (javascript)

\xdd: 用於查找以十六進制數 dd 規定的字符。

//     new RegExp('\xdd') or /\xdd/

var str="this is javascript"; 
var reg=/\x61/g; 
console.log(str.match(reg)); // [a, a] => (javascript)

\uxxxx: 查找以十六進制數 xxxx 規定的 Unicode 字符。

//     new RegExp('\uxxxx') or /\uxxxx/

var str="this is javascript"; 
var reg=/\u0061/g; 
console.log(str.match(reg)); // [a, a] => (javascript)

量詞

n+ 匹配任何包含至少一個 n 的字符串。

// new RegExp('n+') or  /n+/

var str = 'abcddefdsas'
var reg = /a+/g
console.log(str.match(reg))  // [a,a]
console.log(str.search(reg)) // 0
console.log(reg.test(str))   // true

n\* 匹配任何包含零個或多個 n 的字符串。

// new RegExp('n\*') or /n\*/

var str = 'abcddefdsas'
var reg = /a*/g
console.log(str.match(reg))  // ["a", "", "", "", "", "", "", "", "", "a", "", ""]
console.log(str.search(reg)) // 0
console.log(reg.test(str))   // true

n? 匹配任何包含零個或一個 n 的字符串。

// new RegExp('n?') or /n?/

var str = 'abcddefdsas'
var reg = /a?/g
console.log(str.match(reg))  // ["a", "", "", "", "", "", "", "", "", "a", "", ""]
console.log(str.search(reg)) // 0
console.log(reg.test(str))   // true

n{X} 匹配包含 X 個 n 的序列的字符串。 (X是正整數)

// new RegExp('n{X}') or /n{X}/

var str = 'aabcddefdsas'
var reg = /a{1}/g
console.log(str.match(reg))  // ["a", "a", "a"]
console.log(str.search(reg)) // 0
console.log(reg.test(str))   // true

n{X,} 匹配包含 X 個 n 的序列的字符串。可是n必須連續出現至少X次 (X是正整數)

// new RegExp('n{X,}') or /n{X,}/

var str = 'aabcddefdsas'
var reg = /a{1,}/g
console.log(str.match(reg))   // ["aa", "a"]
console.log(str.search(reg))  // 0
console.log(reg.test(str))    // true

n{X,Y} 匹配包含至少 X 個 n,至多 Y 個 n的序列的字符串。(X,Y都是正整數)

// > new RegExp('n{X,Y}') or /n{X,Y}/

var str = 'aabcddaaaaaefdsas'
var reg = /a{1,3}/g
console.log(str.match(reg))    // ["aa", "aaa", "aa", "a"]
console.log(str.search(reg))   // 0
console.log(reg.test(str))     // true

^n 匹配任何開頭爲 n 的字符串。

// new RegExp('^n') or /^n/

var str = 'issue is javascript'
var reg = /^is/g
console.log(str.match(reg))   // ["is"]
console.log(str.search(reg))  // 0
console.log(reg.test(str))    // true

n$ 匹配任何結尾爲 n 的字符串。

// new RegExp('n$') or /n$/

var str = 'What a fine day!'
var reg = /!$/g
console.log(str.match(reg))   // [!]
console.log(str.search(reg))  // 15
console.log(reg.test(str))    // true

?=n 匹配任何其後緊接指定字符串 n 的字符串。

// new RegExp('regexp()?=n') or /regexp(?=n)/

var str = 'this is javaScript not java'
var reg1 = /is(?= java)/g
console.log(str.match(reg1))  // [is] => (is java)

var str = 'thisisjavascriptnotjava'
var reg1 = /is(?=java)/g
console.log(str.match(reg1))  // [is] => (isjava)

?!n 量詞匹配其後沒有緊接指定字符串 n 的任何字符串。

// new RegExp('regexp()?!n') or /regexp(?!n)/

var str = 'this is javaScript not java'
var reg1 = /is(?! java)/g 
console.log(str.match(reg1))  // [is] => (this)

var str = 'this is javaScript not java'
var reg1 = /is(?!java)/g 
console.log(str.match(reg1))  // [is is] => (this is)

上面量詞的介紹，語法，demo我都給了出來了，你們多看幾遍或者拿到本身本地跑跑看，稍微思考一下應該都能懂。

方法

exec() 方法用於檢索字符串中的正則表達式的匹配。若是字符串中有匹配的值返回該匹配值，不然返回 null。屢次使用此方法，該方法會在檢索不到值（返回null）的狀況後，再次檢索又重新開始檢索。下面demo有分析

RegExpObject.exec(string)
string 必須,要搜索的字符串

var str = 'this is RegExp RegExp'
var reg = /RegExp/g;
console.log(reg.exec(str))  // ["RegExp", index: 8, input: "this is RegExp RegExp"] => (谷歌瀏覽器) |  ["RegExp"] => (火狐瀏覽器)
console.log(reg.exec(str))  // ["RegExp", index: 15, input: "this is RegExp RegExp"] => (谷歌瀏覽器) |  ["RegExp"] => (火狐瀏覽器) 
console.log(reg.exec(str))  // null
console.log(reg.exec(str))  // ["RegExp", index: 8, input: "this is RegExp RegExp"] => (谷歌瀏覽器) |  ["RegExp"] => (火狐瀏覽器)

test()檢索字符串中指定的值。返回 true 或 false。

RegExpObject.test(string)
string 必需。要檢測的字符串。

var str = 'this is JavaScript'
var reg = /java/gi
console.log(reg.test(str)) // true

toString()方法返回正則表達式的字符串值。

RegExpObject.toString()

var reg = new RegExp('javascript', 'g')
console.log(reg)
console.log(reg.toString())

谷歌：

火狐：

支持正則表達式的String對象的方法

search()方法用於檢索字符串中指定的子字符串，返回其下標。若是沒有找到任何匹配的子串，則返回 -1。

string.search(searchvalue)
searchvalue 必須。查找的字符串或者正則表達式。

var str = 'not java,this is javascript'
var reg = /java/g
console.log(str.search(reg)) // 4

var str = 'this is javascript'
var reg = 'java'
console.log(str.search(reg)) // 8

match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。

string.match(regexp)
regexp 必需。規定要匹配的模式的 RegExp 對象。若是該參數不是 RegExp 對象，則須要首先把它傳遞給 RegExp 構造函數，將其轉換爲 RegExp 對象。

var str = 'not java,this is javascript'
var reg = /java/g
console.log(str.match(reg)) // [java, java] => (not java, is javascript)

replace() 方法用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子串。

string.replace(searchvalue,newvalue)
searchvalue 必須。規定子字符串或要替換的模式的 RegExp 對象。請注意，若是該值是一個字符串，則將它做爲要檢索的直接量文本模式，而不是首先被轉換爲 RegExp 對象。
newvalue 必需。一個字符串值。規定了替換文本或生成替換文本的函數。

var str = 'not java,this is javascript'
var reg = /java/g
var newStr = 'VB'
console.log(str.replace(reg, newStr))  // not VB,this is VBscript

var str = 'not java,this is javascript'
var reg = 'java'
var newStr = 'VB'
console.log(str.replace(reg, newStr)) // not VB,this is javascript

split() 方法用於把一個字符串分割成字符串數組。

string.split(separator,limit)
separator 可選。字符串或正則表達式，從該參數指定的地方分割 string Object。
limit 可選。該參數可指定返回的數組的最大長度。若是設置了該參數，返回的子串不會多於這個參數指定的數組。若是沒有設置該參數，整個字符串都會被分割，不考慮它的長度。

var colors = "red,blue,green,yellow";
console.log(colors.split(/[^\,]+/));  // ["", ",", ",", ",", ""]

上面幾個方法都仍是挺好理解的，可是上面這個split這個demo我我的思考了好久，後面再寫幾個小demo後纔將其理解透。

var colors = colorText.match(/\,/g); //[ ",", ",", "," ]
console.log(colors) //將全部的逗號 ',' 查詢出來並放到數組裏面去

首先我將裏面的正則表達式進行分解，拿到最簡單的正則表達式 => /\,/g 其實就是將查詢到全部的逗號。

var colorText = "red,blue,green,yellow";
var colors1 = colorText.match(/^\,/g); //null
console.log(colors1) //逗號 ',' 開頭， 找不到爲null

我繼續將正則表達式進一步添加條件後，查詢必須是逗號開頭的匹配條件，固然啦，咱們這裏的字符串確定找不到。

var colorText = "red,blue,green,yellow";
var colors2 = colorText.match(/[^\,]/g); //["r", "e", "d", "b", "l", "u", "e", "g", "r", "e", "e", "n", "y", "e", "l", "l", "o", "w"]
console.log(colors2) //將只要不是逗號 ',' 分隔的都檢索出來

將中括號加上去，額，發現這下子是將符合逗號這個條件給排除了，那麼就是除逗號之外的都是符合要求的。

var colorText = "red,blue,green,yellow";
var colors3 = colorText.match(/[^\,]+/g); //["red", "blue", "green", "yellow"]
console.log(colors3) //檢索出 一至多 除去逗號之外的字符

將正則表達式完善到跟上面一開始demo的同樣， /[^\,]+ 至關於 n+（便可以看作 {1,} ）， n就是上面那個除逗號之外條件，即除了逗號之外的字符至少要有一個，那麼 'r', 'e', 'd'都不是逗號，

並且red後面是逗號，那麼 'red' 這三個字符符合一至多字符，分爲一組，那麼在下一個逗號以前的blue也是一組，green也是一組，yellow頁沒有是逗號的也是一組。