正規表示式詳解

正規表示式是乙個描述字元模式的物件。正規表示式直接量定義在包含一對斜槓之間的字元。

var reg = /\d/;

字元　　　　　　　　　　匹配

\o　　　　　　　　　　　 nul字元(\u0000)

字母與數字本身　　　　　自身

\t　　　　　　　　　　　製表符(\u0009)

\n　　　　　　　　　　換行符(\u000a)

\v　　　　　　　　　　垂直製表符(\u000b)

\f　　　　　　　　　　　換頁符(\u000c)

\r　　　　　　　　　　　回車符(\u000d)

\xnn　　　　　　　　　由16進製制nn指定的拉丁字元

\u***x　　　　　　　　由16進製制nn指定的unicode編碼

\cx　　　　　　　　　　控制字元^x

[……]　　　　　　　　　方括號裡面的任意字元

[^……]　　　　　　　　不在方括號內的任意字元

.　　　　　　　　　　　除換行符和其他unicode行終止符之外的任意字元

\w　　　　　　　　　　任何ascii字元組成的單詞，等價於[a-za-z0-9]

\w　　　　　　　　　　等價於[^a-za-z0-9]

\s　　　　　　　　　　任何unicode空白符

\s　　　　　　　　　　任何非unicode空白符

\d　　　　　　　　　　任何ascii碼數字，等價於[0-9]

\d　　　　　　　　　　任何非ascii碼數字，等價於[^0-9]

[\b]　　　　　　　　　退格直接量(特例)

匹配前一項至少n次，但不能超過m次

匹配前一項至少n次或者更多次

匹配前一項n次

？匹配前一項0次或者1次，等價於

+匹配前一項1次或多次，等價於

*匹配前一項0次或多次，等價於

()把單獨的項組合成表示式，也可以一次或多次重複

|或者，二者選其一，匹配左邊或者匹配右邊的，一般寫在或者()裡面

^取反，或者以什麼什麼開頭

$　　　　　　　　　　以什麼什麼結尾

g　　　　　　　　　　匹配全域性

i　　　　　　　　　　不區分大小寫

m　　　　　　　　　多行匹配

var reg = /^(\d+[g|h])+[^""]$/gim;

上面介紹了很多很簡單的字元，但是具體怎麼來組裝使用呢？是吧，這是乙個梗，現在老夫就帶大家來好好玩一下這個各個語言都會有的乙個神奇的東西。

我們寫正規表示式，首先得定義乙個regex物件，然後再通過規則來查詢。

var reg = /123/；//這裡就是使用//，然後在兩個斜槓中間新增要匹配的規則，在這個正規表示式用是匹配123這個字元。

那接下來我們就需要配合上面的那些字元來一起好好玩一下。

①我們先簡單說明一下中括號花括號大括號豎槓問號加號星號的用法

中括號一般在程式語言中是屬於表示屬性的，然後在這裡，中括號表示匹配中括號中任意乙個字元：[123],在這裡就是表示匹配123中的任意乙個字元，這裡如果想要取反，我們就可以使用 [^abc] ，不匹配abc的字元

大括號一般表示一段**，在這裡也是表示一段**，我們假如想把**包裹起來，就可以用大括號了，比如 ([123]),這樣就表示一段**

花括號一般表示**塊，在正規表示式裡面，花括號表示要匹配的次數，表示匹配一次，表示匹配一到多次，至少一次，至多9次。但是呢經常這樣寫會比較繁雜，所以我們通常把用？表示，把匹配一到多次用+號表示，把0到多次用*表示。

然後 | 一般表示或者的關係，所以我們一般在大括號裡面可以用這個來選擇( a | b | c) 這樣就表示匹配

a或者b或者c

②匹配方案的一些簡寫規則

1.如果我們要匹配0-9這樣的數字，我們可以使用【0-9】，但是正則為我們提供了乙個 \d，這樣就表示匹配0-9，那取反的話，就是\d，大寫的d

2.如果我們想要匹配26個英文本元加上數字0-9，我們可以使用【a-za-z0-9】，正則也為我們提供了 \w，如果不匹配這些，就使用\w

3.如果想要匹配空白符，我們可以使用 \s ，如果不匹配空白符就用大寫的\s

4.如果想匹配中文字元或者其他國家的一些字元，我們可以使用unicode編碼來表示。例如：\u4e00　　

5.如果想匹配除換行符跟其他unicode終止符之外的符號就可以使用 . 點來表示

6.通過以上部分，基本就可以完成常見的一些匹配功能.還有額外的部分，就可以參照我上面寫的一些案例。

現在我們舉個例子來說明：

var str = "width : 100px ;";假如我們想把100px轉化為r(100px);

1.這裡我們先匹配width，那我們應該是匹配字母和0-9，所以是/w，然後多個 \w+

2.width後面可能會有空格，那就應該是 \s 匹配0個多個，就是 \s*

3.空格後面一定要有 : 這個是css的規範，那就要使用先行斷言 ?:: 或者 ?=: 可能很多人會很奇怪什麼意思，簡單來理解就是你前面的空格匹配完成之後後面緊接的一定是什麼，或者不一定是什麼，你先說清楚，所以我們可以使用?: 來表示後面一定是冒號，或者　?=　表示後面一定等於什麼。　　　有正向就一定有反向，那反向就是　?! 表示後面一定沒有什麼

4.冒號後面又可能有空格，我們就可以引用前面的表示式，叫內部引用，等會會給大家講到,然後就是匹配100了，匹配100就是 \d+ 匹配數字1次到多次

5.100後面一定要有px ，所以我們還是要用 ?=px 來斷言一下

6.px後面可能會有空格，空格後面一定以;結尾 \s*;

最後我們拼接一下就是 var reg = /(\w+)(\s*)(?::)\2(\d+(?:px))\2;$/; 其中\2表示內部引用，就是引用第二個括號的內容，有內部引用就有外部引用

我們這裡就可以直接 str.replace(reg,"$1:r($3);"); 注，這裡的的$3表示 (\d+(?:px)) 因為先行斷言只匹配不獲取 $3表示引用第幾個括號的內容

var str = '
width : 100px ;
';//
width: r(100px);
var reg = /(\w+)(\s*)(?::)\2(\d+(?:px))\2;$/;
console.log(str.replace(reg,
"$1:r($3);
"));

正規表示式詳解

正規表示式詳解

正規表示式詳解

正規表示式詳解

相關推薦