亚洲熟女一区二区三区,国产免费久久精品国产传媒,国产欧美一区二区三区在线看

1、正則表達式概述
ECMAScript 3 開始支持正則表達式，其語法和 Perl 語法很類似，一個完整的正則表達式結構如下：
var expression = / pattern / flags ;
其中，模式（pattern）部分可以是任何簡單或復雜的正則表達式，可以包含字符類、限定符、分組、向前查找以及反向引用。

每個正則表達式都可帶有一或多個標志（flags），用以標明正則表達式的行為，正則表達式支持下列 3 個標志：

g：表示全局（global）模式，即模式將被應用于所有字符串，而非在發現第一個匹配項時立即停止；
i ：表示不區分大小寫（case-insensitive）模式，即在確定匹配項時忽略模式與字符串的大小寫；
m：表示多行（multiline）模式，即在到達一行文本末尾時還會繼續查找下一行中是否存在與模式匹配的項。
如果多個標志同時使用時，則寫成：gmi。

正則表達式的創建有兩種方式：new RegExp(expression)和直接字面量。
//使用直接字面量創建
var exp1 = /(^\s+)|(\s+$)/g;

//使用RegExp對象創建
var exp2 = new RegExp("(^\\s+)|(\\s+$)","g");
exp1 和exp2 是兩個完全等價的正則表達式，需要注意的是，傳遞給 RegExp構造函數的兩個參數都是字符串，不能把正則表達式字面量傳遞給 RegExp 構造函數。

與其他語言中的正則表達式類似，模式中使用的所有元字符都必須轉義。正則表達式中的元字符包括：
( [ { \ ^ $ | ) ? * + .] }
這些元字符在正則表達式中都有一或多種特殊用途，因此如果想要匹配字符串中包含的這些字符，就必須對它們進行轉義。

//匹配 .docx
var exp = /\.docx/gi ;

由于 RegExp 構造函數的模式參數是字符串，所以在某些情況下要對字符進行雙重轉義。所有元字符都必須雙重轉義，那些已經轉義過的字符也是如此。

// 對 \. 再次轉義
var exp = new RegExp("\\.docx","gi");

//匹配 \n
var exp1 = /\\n/g; //對\n中的\轉義
var exp2 = new RegExp("\\\\n","g"); // 對 \\n 再次轉義

2、() [] {} 的區別

() 的作用是提取匹配的字符串。表達式中有幾個()就會得到幾個相應的匹配字符串。比如 (\s+) 表示連續空格的字符串。

[]是定義匹配的字符范圍。比如 [a-zA-Z0-9]表示字符文本要匹配英文字符和數字。

{}一般用來表示匹配的長度，比如 \d{3}表示匹配三個數字，\d{1,3} 表示匹配1~3個數字，\d{3,}表示匹配3個以上數字。

3、^和$

^ 匹配一個字符串的開頭，比如 (^a)就是匹配以字母a開頭的字符串

$匹配一個字符串的結尾,比如 (b$)就是匹配以字母b結尾的字符串

^ 還有另個一個作用就是取反，比如[^xyz] 表示匹配的字符串不包含xyz

注意問題：

如果 ^出現在[ ]中一般表示取反，而出現在其他地方則是匹配字符串的開頭。
^ 和$ 配合可以有效匹配完整字符串:/d+/.test('4xpt') -> true，而 /^\d+$/.test('4xpt')->false

4、\d \s \w .

\d 匹配一個非負整數，等價于[0-9]

\s匹配一個空白字符

\w 匹配一個英文字母或數字，等價于[0-9a-zA-Z]

. 匹配除換行符以外的任意字符，等價于[^\n]

5、* + ?

*表示匹配前面元素0次或多次，比如(\s*)就是匹配0個或多個空格

+ 表示匹配前面元素1次或多次，比如 (\d+)就是匹配由至少1個整數組成的字符串

?表示匹配前面元素0次或1次，相當于{0,1} ，比如(\w?) 就是匹配最多由1個字母或數字組成的字符串

6、$1和\1

$1-$9存放著正則表達式中最近的9個正則表達式的提取的結果，這些結果按照子匹配的出現順序依次排列。基本語法是：RegExp.$n ，這些屬性是靜態的，除了replace中的第二個參數可以省略 RegExp之外，其他地方使用都要加上 RegExp 。

//使用RegExp訪問
/(\d+)-(\d+)-(\d+)/.test("2016-03-26")

RegExp.$1  // 2016
RegExp.$2  // 03
RegExp.$3  // 26

//在replace中使用
"2016-03-26".replace(/(\d+)-(\d+)-(\d+)/,"$1年$2月$3日") 
// 2016年03月26日

\1表示后向引用，是指在正則表達式中，從左往右數，第1個()中的內容，以此類推，\2表示第2個()，\0表示整個表達式。

//匹配日期格式，表達式中的\1代表重復(\-|\/|.)
var rgx = /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}"/
rgx.test("2016-03-26") //true 
rgx.test("2016-03.26") //false

兩者的區別是：\n只能用在表達式中，而$n只能用在表達式之外的地方。

7、test和match

前面的大都是JS正則表達式的語法，而test則是用來檢測字符串是否匹配某一個正則表達式，如果匹配就會返回true,反之則返回false

/\d+/.test("123") ; //true
 
/\d+/.test("abc") ; //false

match是獲取正則匹配到的結果，以數組的形式返回

"186a619b28".match(/\d+/g); // ["186","619","28"]

8、replace

replace 本身是JavaScript字符串對象的一個方法，它允許接收兩個參數：

replace([RegExp|String],[String|Function])
第1個參數可以是一個普通的字符串或是一個正則表達式
第2個參數可以是一個普通的字符串或是一個回調函數

如果第1個參數是 RegExp，JS會先提取RegExp匹配出的結果，然后用第2個參數逐一替換匹配出的結果

如果第2個參數是回調函數，每匹配到一個結果就回調一次，每次回調都會傳遞以下參數：
result: 本次匹配到的結果

$1,...$9: 正則表達式中有幾個()，就會傳遞幾個參數，$1~$9分別代表本次匹配中每個()提取的結果，最多9個

offset:記錄本次匹配的開始位置
source:接受匹配的原始字符串

9、經典案例

(1) 實現字符串的trim函數，去除字符串兩邊的空格。

String.prototype.trim = function(){
    //方式一：將匹配到的每一個結果都用""替換
    return this.replace(/(^\s+)|(\s+$)/g,function(){
        return "";
    });
    //方式二：和方式一的原理相同
    return this.replace(/(^\s+)|(\s+$)/g,'');
};

^\s+ 表示以空格開頭的連續空白字符，\s+$ 表示以空格結尾的連續空白字符，加上()就是將匹配到的結果提取出來，由于是 | 的關系，因此這個表達式最多會match到兩個結果集，然后執行兩次替換：

String.prototype.trim = function(){
    /**
     * @param rs：匹配結果
     * @param $1:第1個()提取結果
     * @param $2:第2個()提取結果
     * @param offset:匹配開始位置
     * @param source：原始字符串
     */
    this.replace(/(^\s+)|(\s+$)/g,function(rs,$1,$2,offset,source){
        //arguments中的每個元素對應一個參數
        console.log(arguments);
    });
};
 
" abcd ".trim();

輸出結果：

[" ", " ", undefined, 0, " abcd "] //第1次匹配結果
[" ", undefined, " ", 5, " abcd "] //第2次匹配結果

(2) 提取瀏覽器 url 中的參數名和參數值，生成一個key/value 的對象。

function getUrlParamObj(){
    var obj = {};
    //獲取url的參數部分
    var params = window.location.search.substr(1);
    //[^&=]+ 表示不含&或=的連續字符，加上()就是提取對應字符串
    params.replace(/([^&=]+)=([^&=]*)/gi,function(rs,$1,$2){
        obj[$1] =  decodeURIComponent($2);
    });
 
    return obj;
}

/([^&=]+)=([^&=]*)/gi 每次匹配到的都是一個完整key/value,形如xxxx=xxx, 每當匹配到一個這樣的結果時就執行回調，并傳遞匹配到的key和 value，對應到$1和$2。

(3) 擴展 typeof，包含引用類型的具體類型。

function getDataType(obj){
    let rst = Object.prototype.toString.call(obj);
    rst = rst.replace(/\[object\s(\w+)\]/,'$1'); //[object Xxx]
    return rst.toLowerCase()
}
 
getDataType(1); //number
getDataType('a'); //string
getDataType(null); //null
getDataType([]); //array

$1是正則表達式中第一個()中匹配的內容。需要注意的是，replace的第二個參數只能是字符串或函數，因此，這里的$1需要放在引號中。

(4) 在字符串指定位置插入新字符串。

String.prototype.insetAt = function(str,offset){
    offset = offset + 1;
    //使用RegExp()構造函數創建正則表達式
    var regx = new RegExp("(^.{"+offset+"})");
    return this.replace(regx,"$1"+str);
};
 
"abcd".insetAt('xyz',2); //在c字符后插入xyz
>> "abcxyzd"

當offset=2時，正則表達式為：(^.{3}) .表示除\n之外的任意字符，{3}表示匹配前三個連續字符，加()就會將匹配到的結果提取出來，然后通過replace將匹配到的結果替換為新的字符串，形如：結果=結果+str

(5) 將手機號12988886666轉化成129****6666 。

function telFormat(tel){
    tel = String(tel);
    //方式一
    return tel.replace(/(\d{3})(\d{4})(\d{4})/,function (rs,$1,$2,$3){
       return $1+"****"+$3
    });
 
    //方式二
    return tel.replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
}

(\d{3}\d{4}\d{4})可以匹配完整的手機號，并分別提取前 3 位、4-7 位和 8-11位，" $1****$ 3" 是將第 2 個匹配結果用****代替并組成新的字符串，然后替換完整的手機號。

(6) 實現HTML編碼，將< / > " & `等字符進行轉義，避免XSS攻擊。

function htmlEncode(str) {
    //匹配< / > " & `
    return str.replace(/[<>"&\/`]/g, function(rs) {
        switch (rs) {
            case "<":
                return "<";
            case ">":
                return ">";
            case "&":
                return "&";
            case "\"":
                return """;
            case "/": 
                return "/"
            case "`":
                return "'"
        }
    });
}

另:常用正則表達式

//將數轉為帶,號的貨幣形式
'1231232341'.replace(/\B(?=(\d{3})+(?!\d))/g,',');
'1231232341'.replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');

//去掉括號及其內容
'www(sdfsdf)'.replace(/\([^\)]*\)/g,'');

//匹配#000-#fff表示法的顏色
"^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$"
//匹配rgb和rgba的顏色
"^[rR][gG][Bb][Aa]?[\(]((2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),){2}(2[0-4][0-9]|25[0-5]|[01]?[0-9][0-9]?),?(0\.\d{1,2}|1|0)?[\)]{1}$"

匹配規則

下面將正則中的一些基本的匹配規則列出來如下表所示：

image

要點

貪與不貪

舉個例子，假設有以下這段html字符，我想拿到a標簽中的內容：

<a>南京長江大橋</a>哈哈<a>南京市長江大橋</a>

然后我寫了這樣一個正則： <a>(.)*</a>

在線測試的結果如下：

image

這個結果與我們的預期不符，正常我應該得到兩個匹配的結果才對，但是現在卻只匹配到一個結果。

現在把剛剛的正則改成這樣： <a>(.)*?</a>

在線測試的結果如下：

image

貪 說的是正則在不約束的情況下會繼續自動向右進行匹配，直到匹配結束，只要匹配的數據與正則的最后一個值匹配就算是匹配到了。

不貪 說的是只要匹配到就結束，不繼續向右進行匹配了。

問號 ? 就解決了貪婪的問題，使得問號前面的字符匹配到之后就結束，但是并不是把 ? 放在哪里都可以解決貪婪的，在正則里，有一些屬于貪婪模式量詞，比如以下這些:

{m,n}
{m,}
?
*
+

斷言與零寬

在java中我們知道 斷言 可以用來聲明一個應該為 true 的事實，只有當斷言為真時才會繼續進行后續的操作。

在正則中也有 斷言 的概念，但是在正則中除了 斷言 還有 零寬 的概念。

斷言：

通俗點將斷言就是 “我斷定某某情況是真的” ，而正則中的斷言，就是說正則可以斷定在 指定的內容 的前面或后面會出現滿足指定規則的內容。比如 "aa1bb2cc3"，正則可以用斷言找出 bb2 前面有 aa1，也可以找出 bb2 后面有 cc3。

零寬：

零寬就是沒有寬度，在正則中，斷言只是匹配位置，不占字符，也就是說，匹配結果里是不會返回斷言本身的。

斷言一共有四種情況：

image

讓我們來舉個例子來說明吧，假設我們現在拿到了某個網頁的html，里面有個閱讀數的標簽：

<span class="read-cnt">閱讀數：1024</span>
現在我們要獲取到這個閱讀數，該怎么辦呢？

如果用正向先行斷言來匹配的話，可以這樣來寫：

\d+(?=</span>)
上述的表達式就是說明，我現在斷言整數 \d+ 的后面能匹配表達式： </span>

讓我們來驗證下結果：

image

相應的正向后行斷言可以這樣寫表達式：
(?<=閱讀數：)\d+

上述的表達式就是說明，我現在斷言整數 \d+ 的前面能匹配表達式： 閱讀數：

驗證下結果如下：

image

分組

正則表達式中用小括號 () 來做分組，也就是括號中的內容作為一個整體。

因此當我們要匹配分組 he 的時候，可以用下面這個表達式：
(he)

image

我們看到正則表達式用小括號來做分組，那么問題來了：

如果要匹配的字符串中本身就包含小括號，那應該怎么辦？

針對這種情況，正則提供了轉義的方式，也就是要把這些元字符、限定符或者關鍵字轉義成普通的字符，做法很簡單，就是在要轉義的字符前面加個斜杠()即可。

因此當我們要匹配分組 (he) 的時候，可以用下面這個表達式：
($he$)

image

下面我們用一個正則表達式的圖形生成工具，做一個對比的實驗，讓我們對分組和定位有個了解。

1：匹配 he 分組一次 ;

image

2：匹配 he 分組零或多次；

image

3：匹配以 he 開頭的分組一次；

image

4：匹配以 he 開頭的分組零或多次

image

捕獲與反向引用

單純說到捕獲，他的意思是匹配表達式，但捕獲通常和分組聯系在一起，也就是“捕獲組”。

捕獲組：

匹配子表達式的內容，把匹配結果保存到內存中以數字編號或顯示命名的組里(可以把它想象為java中的array和map)，以深度優先進行編號，之后可以通過序號或名稱來使用這些匹配結果。

捕獲組的表達式為： (exp) ，這個語法跟上面講到的分組的概念是一樣的，只是捕獲將匹配到的分組，保存在了內存中，留待后面使用。具體怎么時候他不管，他只需要把匹配到的分組保存在內存中就可以了。

有一種情況當在匹配的過程中，需要與已經捕獲到的分組進行匹配，這時就需要使用到保存在內存中的捕獲組了，這種使用方式就被稱為： 反向引用 。

假設我有這樣一段文字：
aa12bb23cc34
現在我想拿到成對的字符，該怎么做呢？這種情況下通過斷言或者其他方式是辦不到的，那我們能否在匹配的過程中將匹配到的一個字符先保存在內存中，然后匹配下一個字符時再與上一個字符相比較，如果相等，就說明匹配成了，拿到了成對的字符了。

那首先我們先要寫一個匹配單個字符分組的表達式：
(\w)
那當匹配時捕獲到一個字符分組時，我們需要將該字符引用出來，與下一個字符想比較，我們期望匹配的下一個字符也與我當前保存的字符相等，那么表達式就變成了這樣：
(\w)\1
這里的 \1 表示的是，當前正則表達式匹配到的 第1個 分組，那就意味著， \2 表示 第2個分組。

做個測試，結果如下：

image

那如果我想再匹配復雜一點的結果，比如：XYY 這種的結果，又該怎么寫呢？

其實有了上面的基礎之后就很簡單了，我們需要做的就是 對捕獲到的第2個分組進行反向引用就可以了！

具體的表達式為：
(\w)(\w)\2
測試結果如下：

image

表示成圖形就是這樣：

image

附常用工具：

在線正則測試:http://tool.oschina.net/regex/
生成正則圖片:https://regexper.com

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

JavaScript - 正則表達式

JavaScript - 正則表達式

匹配規則

要點

貪與不貪

斷言與零寬

分組

捕獲與反向引用

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JavaScript - 正則表達式

匹配規則

要點

貪與不貪

斷言與零寬

分組

捕獲與反向引用

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频