JS正則表達式的創建、匹配字元串、轉義、字元類、重覆以及常用字元

正則表達式都是操作字元串的

作用：對數據進行查找、替換、有效性驗證

創建正則表達式的兩種方式：

// 字面量方式
/js/

// 構造函數方式
regular expression
new RegExp()

普通字元：字母 數字 漢字 _ 空格 ; , @ （沒有特殊含義的符號）

兩種匹配的方式：

test 測試，找到返回true，反之為false

exec 匹配字元，找到的話就返回該字元（以數組形式），反之返回null

這兩個都是屬於正則的方法，所以前面是跟的正則

var str="i love js";
var pattern=/js/;
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

var pattern=/Js/;
console.log(pattern.test(str));//false
console.log(pattern.exec(str));//null

正則預設情況下是區分大小寫的

使用模式修飾符可以設置不區分大小寫

三種模式修飾符：

i  ignoreCase  忽略大小寫

g  global  全局匹配

m   multiline  多行匹配

var str="i love js";

var pattern=/Js/i;
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

 i g m這三個模式修飾符可以任意組合，無順序要求

var str="i love js";

var pattern=new RegExp("js");
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

var pattern=new RegExp("Js");
console.log(pattern.test(str));//false
console.log(pattern.exec(str));//null

var pattern=new RegExp("Js","i");
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

字面量方式與構造函數方式的區別：

/js/i   直觀簡潔

new RegExp("js", "i")  可以由於變數的檢測

var str="i love js";

var userInput="js";//需要匹配的字元在變數中
var pattern=/userInput/i;//該方式不可取，直接匹配的是userInput
console.log(pattern.test(str));//false
console.log(pattern.exec(str));//null

var userInput="js";//需要匹配的字元在變數中
var pattern="/"+userInput+"/i";//該方式不可取，正則變為了字元串，不再具有test和exec方法
console.log(typeof pattern);//string 
console.log(pattern.test(str));//報錯
console.log(pattern.exec(str));//報錯

var pattern=new RegExp(userInput,"i");
console.log(typeof pattern);//object 正則屬於正則對象
console.log(pattern.test(str));//true
console.log(pattern.exec(str));//["js", index: 7, input: "i love js", groups: undefined]

簡單的轉義字元

/ 表示正則的邊界，匹配時需要進行轉義

        var str="//我是註釋";
        var pattern=/\/\//;
        console.log(pattern.exec(str));// ["//", index: 0, input: "//我是註釋", groups: undefined]

字元串中如果存在 \ ，預設會對下一個字元進行轉義，如果需要作為普通字元處理，就對轉義字元 \ 再進行轉義處理 \\ 

    var str="\\\\";
    console.log(str);// 結果只顯示\\

普通字元加上 \ 可能會有特殊含義

如 \n 代表換行

    var str="nba";
    var pattern=/n/;
    console.log(pattern.exec(str));//匹配n  ["n", index: 0, input: "nba", groups: undefined]

    var pattern2=/\n/;
    console.log(pattern2.exec(str));//匹配換行符  null

\t 匹配 tab鍵

    var str="    hello";
    var pattern=/\t/;
    console.log(pattern.exec(str));//匹配n  ["    ", index: 0, input: "    hello", groups: undefined]

可以用 ascii碼 來正則匹配字元

    var str="hello\ncyy";
    var pattern=/\x0A/;
    console.log(pattern.exec(str));//匹配\n  ["↵", index: 5, input: "hello↵cyy", groups: undefined]

可以用 unicode 編碼來正則匹配字元

    var str="    前面是tab鍵";
    var pattern=/\u0009/;
    console.log(pattern.exec(str));//匹配tab鍵  ["    ", index: 0, input: "    前面是tab鍵", groups: undefined]

unicode 常用於匹配漢字

匹配一個字元串中的所有中文：\u4e00-\u9fa5

    var str="i am 陳鶯鶯";
    var pattern=/[\u4e00-\u9fa5]/;
    console.log(pattern.exec(str));//匹配中文  ["陳", index: 5, input: "i am 陳鶯鶯", groups: undefined]

可以匹配換行符的有： \n    \x0A   \u000A

字元類

[ ] 匹配中間的任意一個字元

    var str="javascript";
    var pattern=/[js]/;
    console.log(pattern.exec(str));//匹配j  ["j", index: 0, input: "javascript", groups: undefined]

[^ ]  表示取反

    var str="javascript";
    var pattern=/[^js]/;//匹配除了j和s之外的
    console.log(pattern.exec(str));// ["a", index: 1, input: "javascript", groups: undefined]

[ ] 中間可以是一個範圍

    var str="javascript";
    var pattern=/[k-z]/;//匹配k-z之間的字母
    console.log(pattern.exec(str));// ["v", index: 2, input: "javascript", groups: undefined]

表示範圍時，前面的必須小於等於後面的

    var str="javascript";
    var pattern=/[c-c]/;//前面等於後面
    console.log(pattern.exec(str));// ["c", index: 5, input: "javascript", groups: undefined]

    var pattern2=/[c-b]/;//前面大於後面
    console.log(pattern2.exec(str));// 報錯

同時匹配大小寫字母

    var str="JavaScript";
    var pattern=/[a-zA-Z]/;//前面等於後面
    console.log(pattern.exec(str));// ["J", index: 0, input: "JavaScript", groups: undefined]

匹配所有數字 0-9

    var str="JavaScript3333";
    var pattern=/[0-9]/;
    console.log(pattern.exec(str));// ["3", index: 10, input: "JavaScript3333", groups: undefined]

[ ] 中間可任意組合，如

[a-zA-Z0-9@_]

常用的字元類：

. 匹配所有除了 \n 之外的字元

    var str="3.14";
    var pattern=/./;
    console.log(pattern.exec(str));// ["3", index: 0, input: "3.14", groups: undefined]

如果單純匹配 .  轉義即可

    var str="3.14";
    var pattern=/\./;
    console.log(pattern.exec(str));// [".", index: 1, input: "3.14", groups: undefined]

. 不能匹配換行符

    var str="\n";
    var pattern=/./;
    console.log(pattern.exec(str));// null

數字字母下劃線

/[a-zA-Z0-9_]/      =    /\w/

/[^a-zA-Z0-9_]/    =   /\W/

    var str="@_";
    var pattern=/\w/;
    console.log(pattern.exec(str));// ["_", index: 1, input: "@_", groups: undefined]

數字

/[0-9]/   =   /\d/

/[^0-9]/   =  /\D/

    var str="@_123";
    var pattern=/\d/;
    console.log(pattern.exec(str));// ["1", index: 2, input: "@_123", groups: undefined]

/ /  匹配空格

/　　/ 匹配 tab

/\s/  匹配空格或者製表符（tab）

/\S/  匹配除了空格或者製表符之外的其他字元

匹配的順序取決於字元串中的順序

    var str="    9";
    var pattern=/[\d\s]/;
    console.log(pattern.exec(str));// ["    ", index: 0, input: "    9", groups: undefined]

重覆

{n} 表示量詞，出現 n 次

    var str="123456789";
    var pattern=/\d{3}/;//匹配3個數字
    console.log(pattern.exec(str));// ["123", index: 0, input: "123456789", groups: undefined]

{n1, n2} 表示出現次數大於等於n1，小於等於n2

    var str="123456789";
    var pattern=/\d{2,3}/;//匹配2-3個數字，會儘可能多的匹配
    console.log(pattern.exec(str));// ["123", index: 0, input: "123456789", groups: undefined]

{n1, } 表示大於等於n1

{ ,n2 } 不表示小於等於n2，這種寫法是錯誤的

    var str="123456789";
    var pattern=/\d{1,}/;
    console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]

    var pattern2=/\d{,2}/;//這種寫法是錯誤的
    console.log(pattern2.exec(str));// null

?   =  {0,1}  匹配0次或者1次

    var str="123456789";
    var pattern=/\d?/;
    console.log(pattern.exec(str));// ["1", index: 0, input: "123456789", groups: undefined]

+  =  {1,}  至少1次

    var str="123456789";
    var pattern=/\d+/;
    console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]

*  =  任意次（包括0次）

    var str="123456789";
    var pattern=/\d*/;
    console.log(pattern.exec(str));// ["123456789", index: 0, input: "123456789", groups: undefined]

匹配價格

    var str="肯德基豪華午餐￥15.5元";
    var pattern=/\d+\.?\d*/;
    //前面的數字 至少有1位
    //. 出現0次或者1次
    //後面的數字 可以有也可以沒有，任意次
    console.log(pattern.exec(str));// ["15.5", index: 8, input: "肯德基豪華午餐￥15.5元", groups: undefined]

匹配正整數和負整數

    var str="肯德基豪華午餐￥15.5元";
    var pattern=/-?[1-9]\d*/;
    var pattern=/-{0,1}[1-9]\d*/;

非貪婪的重覆

正則匹配預設是貪婪模式，存在量詞時會儘可能多的匹配

    var str="aaab";
    var pattern=/a+/;
    console.log(pattern.exec(str));//["aaa", index: 0, input: "aaab", groups: undefined]

在量詞後面加上 ?  ，表示由貪婪模式轉為非貪婪模式，儘可能少的匹配

    var str="aaab";
    var pattern=/a+?/;
    console.log(pattern.exec(str));//["a", index: 0, input: "aaab", groups: undefined]

但是正則有一個原則，就是去找第一個可能匹配的字元

而不是最合適的位置

    var str="aaab";
    var pattern=/a+?b/;//此處並不會匹配到ab
    console.log(pattern.exec(str));//["aaab", index: 0, input: "aaab", groups: undefined]

如上，並不會匹配到ab，因為正則從0開始就匹配到了a，之後會一直沿著下去尋找b

貪婪匹配與非貪婪匹配的應用

    var str="<td>第一格</td><td>第二格</td>";
    var pattern=/<td>.*<\/td>/;//貪婪模式，匹配兩格
    console.log(pattern.exec(str));//["<td>第一格</td><td>第二格</td>", index: 0, input: "<td>第一格</td><td>第二格</td>", groups: undefined]

    var pattern2=/<td>.*?<\/td>/;//非貪婪模式，匹配一格
    console.log(pattern2.exec(str));//["<td>第一格</td>", index: 0, input: "<td>第一格</td><td>第二格</td>", groups: undefined]

選擇 | 

    var str="css js";
    var pattern=/js|html|css/;
    console.log(pattern.exec(str));//["css", index: 0, input: "css js", groups: undefined]

選擇最先匹配的，而不是最合適的

    var str="ab";
    var pattern=/a|ab/;//先嘗試匹配a，匹配成功後，不再匹配ab
    console.log(pattern.exec(str));//["a", index: 0, input: "ab", groups: undefined]

正則匹配上傳圖片的尾碼名：一般圖片的尾碼名有gif，jpg，jpeg，png等，並且不區分大小寫

/\.gif|\.jpg|\.jpeg|\.png/i

分組和引用 ()

    var str="abab";
    var pattern=/(ab)+/;//將ab看成一個整體
    console.log(pattern.exec(str));//(2) ["abab", "ab", index: 0, input: "abab", groups: undefined]

返回的數組中，第一個元素是匹配到的結果，第二個元素是 () 中分組的元素

( )  捕獲分組

(?: )  不捕獲分組

    var str="abcd";
    var pattern=/(abc)d/;//匹配到abcd，捕獲到abc
    console.log(pattern.exec(str));//(2) ["abcd", "abc", index: 0, input: "abcd", groups: undefined]


    var str="abcd";
    var pattern=/(?:abc)d/;//匹配到abcd，沒有捕獲
    console.log(pattern.exec(str));//(2) ["abcd", index: 0, input: "abcd", groups: undefined]

平行分組依次返回

    var str="abcd";
    var pattern=/(ab)(cd)/;//匹配到abcd，第一個分組ab，第二個分組cd
    console.log(pattern.exec(str));//["abcd", "ab", "cd", index: 0, input: "abcd", groups: undefined]

嵌套分組，按左邊括弧的順序來進行返回

    var str="abcd";
    var pattern=/(a(b(c(d))))/;
    console.log(pattern.exec(str));//(5) ["abcd", "abcd", "bcd", "cd", "d", index: 0, input: "abcd", groups: undefined]

可以在正則中直接使用分組  \n 代表第n個分組

    var str="abcdab";
    var pattern=/(ab)cd\1/;//\1代表第一個分組，即ab
    console.log(pattern.exec(str));//(2) ["abcdab", "ab", index: 0, input: "abcdab", groups: undefined]

分組的實際應用

匹配外層容器中的html文本，外層容器是不確定的標簽

    var str="<div><p>這是html文本</p></div>";
    var pattern=/<([a-zA-Z]+)>(.*?)<\/\1>/;//\1代表閉合標簽，必須與開始標簽相同
    console.log(pattern.exec(str));//["<div><p>這是html文本</p></div>", "div", "<p>這是html文本</p>", index: 0, input: "<div><p>這是html文本</p></div>", groups: undefined]

如上，第一個分組是外層標簽名，第二個分組是獲取到的內層html

.exec 返回的數組：

匹配到的結果

分組依次返回

index 匹配到的位置索引

input 被匹配的字元串

位置匹配之首尾匹配

^ 字元串的開始

$ 字元串的結束

    var str="js";
    var pattern=/^js/;
    console.log(pattern.exec(str));//["js", index: 0, input: "js", groups: undefined]

    var str="html js";
    var pattern=/^js/;
    console.log(pattern.exec(str));//null

匹配全是數字

    var str="123mm567";
    var pattern=/^\d+$/;
    console.log(pattern.exec(str));//null

    if(pattern.test(str)){
        alert("全是數字");
    }else{
        alert("不全是數字");//不全是數字
    }

反向思考，匹配不是數字

    var str="123mm567";
    var pattern=/\D/;
    console.log(pattern.exec(str));//["m", index: 3, input: "123mm567", groups: undefined]

    if(!pattern.test(str)){
        alert("全是數字");
    }else{
        alert("不全是數字");//不全是數字
    }

位置匹配之單詞邊界匹配

單詞邊界 \b

非單詞邊界 \B

    var str="js html";
    var pattern=/js\b/;
    console.log(pattern.exec(str));//["js", index: 0, input: "js html", groups: undefined]

    var str="@@@js@@@";//@也屬於單詞邊界
    var pattern=/\bjs\b/;
    console.log(pattern.exec(str));//["js", index: 0, input: "js html", groups: undefined]

實現可相容IE低版本的 getElementsByClassName()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="odd1 odd odd2">1</li>
        <li class="even">2</li>
        <li class="odd">3</li>
        <li class="even">4</li>
    </ul>
<script>
    function getByClass(className,node){
        //高版本瀏覽器
        if(document.getElementsByClassName(className)){
            return document.getElementsByClassName(className)
        }else{
            //IE低版本瀏覽器
            var node=node || document;
            var arr=[];
            var elements=node.getElementsByTagName("*");//獲取所有元素
            //註意，使用構造函數創建正則，其中的轉義字元需要進行雙重轉義
            var pattern=new RegExp("(^|\\s+)"+className+"($|\\s+)");
            for(var i=0;i<elements.length;i++){
                //匹配className
                if(pattern.test(elements[i].className)){
                    arr.push(elements[i]);
                }
            }
            return arr;
        }
    }
    var odds=getByClass("odd");
    for(var i=0;i<odds.length;i++){
        odds[i].style.background="pink";
    }
    var evens=getByClass("even");
    for(var i=0;i<evens.length;i++){
        evens[i].style.background="#abcdef";
    }
</script> 
</body>
</html>

 使用單詞邊界的思路也可實現 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li class="odd1 odd odd2">1</li>
        <li class="even">2</li>
        <li class="odd">3</li>
        <li class="even">4</li>
    </ul>
<script>
    function getByClass(className,node){
        //高版本瀏覽器
        if(document.getElementsByClassName(className)){
            return document.getElementsByClassName(className)
        }else{
            //IE低版本瀏覽器
            var node=node || document;
            var arr=[];
            var elements=node.getElementsByTagName("*");//獲取所有元素
            //註意，使用構造函數創建正則，其中的轉義字元需要進行雙重轉義
            var pattern=new RegExp("\\b"+className+"\\b");
            for(var i=0;i<elements.length;i++){
                //匹配className
                if(pattern.test(elements[i].className)){
                    arr.push(elements[i]);
                }
            }
            return arr;
        }
    }
    var odds=getByClass("odd");
    for(var i=0;i<odds.length;i++){
        odds[i].style.background="pink";
    }
    var evens=getByClass("even");
    for(var i=0;i<evens.length;i++){
        evens[i].style.background="#abcdef";
    }
</script> 
</body>
</html>

前瞻性匹配 (?= )

var str="javascript";
var pattern=/java(?=script)/;//如果java後面跟的是script，那麼匹配出java
console.log(pattern.test(str));//true

var str="java";
var pattern=/java(?=script)/;//如果java後面跟的是script，那麼匹配出java
console.log(pattern.test(str));//false

負前瞻性匹配 (?!)

var str="javascript";
var pattern=/java(?!script)/;//如果java後面跟的是script，那麼不匹配出java
console.log(pattern.test(str));//false

var str="java";
var pattern=/java(?!script)/;//如果java後面跟的不是script，那麼匹配出java
console.log(pattern.test(str));//true

RegExp 對象的實例方法

其中的轉義字元需要進行雙重轉義

var pattern=new RegExp("\b");
console.log(pattern);//  //

var pattern=new RegExp("\\b");
console.log(pattern);//  /\b/

因此，如果是 \ ，直面量方式轉義為 \\，構造函數雙重轉義為 \\\\

var pattern=new RegExp("\\\\");
console.log(pattern);//  /\\/

pattern 就是正則實例的對象，pattern 擁有的方法就是實例方法

如：  .test()     .exec()

var str="js js js";

var pattern=/js/;
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 

var pattern=/js/g;
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 3, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// ["js", index: 4, input: "js js js", groups: undefined] 
console.log(pattern.exec(str));// null
console.log(pattern.exec(str));// ["js", index: 0, input: "js js js", groups: undefined] 

如上，exec 有一個屬性，叫 lastIndex，預設是0

如果設置為全局匹配，則 lastIndex 是上一次匹配的結束位置的下一位

如果匹配到為 null，就會自動重置為0，再次進行下一輪

分組之後也能捕獲

var str="js js js";

var pattern=/(j)s/;
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]

var pattern=/(j)s/g;
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 3, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// (2) ["js", "j", index: 6, input: "js js js", groups: undefined]
console.log(pattern.exec(str));// null
console.log(pattern.exec(str));// (2) ["js", "j", index: 0, input: "js js js", groups: undefined]

實例：

var str="1.js 2.js 3.js";
var pattern=/js/g;
var total=0;//出現的總次數
var result;

while((result=pattern.exec(str))!=null){//先賦值再進行判斷
    total++;
    console.log(result[0]+"第"+total+"次出現的位置是："+result.index);
}
console.log("總共出現了"+total+"次");

test 與 exec 類似原理

var str="js js js";
var pattern=/js/;
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true

var pattern=/js/g;
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//true
console.log(pattern.test(str));//false
console.log(pattern.test(str));//true

.toString()  轉字元串

.toLocaleString() 轉本地字元串（僅限少數語言）

.valueOf() 返回正則本身

var pattern=new RegExp("a\\nb");
console.log(pattern.toString());
//  /a\nb/  此處返回的是字面量形式的字元串
console.log(pattern.toLocaleString());//  /a\nb/
console.log(pattern.valueOf());// /a\nb/
console.log(pattern.valueOf()===pattern);// true

實例屬性

.ignoreCase  判斷是否忽略大小寫

.global  是否全局

.multiline  是否匹配到多行

.source 返回字面量正則本身

var str="js js js";
var pattern=/js/im;
console.log(pattern.ignoreCase);//true
console.log(pattern.global);//false
console.log(pattern.multiline);//true
console.log(pattern.source);//js
console.log(pattern.source===pattern);//false

.lastIndex 最後一次匹配的位置的後一位

var str="js js";
var pattern=/js/;
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//0

var pattern=/js/g;
console.log(pattern.lastIndex);//0
pattern.test(str);
console.log(pattern.lastIndex);//2
pattern.test(str);
console.log(pattern.lastIndex);//5
pattern.test(str);
console.log(pattern.lastIndex);//0 匹配不到時重置到0
pattern.test(str);
console.log(pattern.lastIndex);//2

構造函數屬性  RegExp.

.input 待匹配的字元串  =  $_

.lastMatch  最近一次匹配到的字元  =  $&

.leftContext 最近一次匹配時左邊的字元  = $`

.rightContext 最近一次匹配時右邊的字元  = $'

.lastParen  最近一次匹配到的子選項（分組中的內容） = $+

.$n  捕獲分組

var str="js js";
var pattern=/(j)s/;
pattern.exec(str);

//待匹配的字元串
console.log(RegExp.input);//js js
console.log(RegExp["$_"]);//js js

//最近一次匹配到的字元
console.log(RegExp.lastMatch);//js
console.log(RegExp["$&"]);//js

//最近一次匹配時左邊的字元
console.log(RegExp.leftContext);//空
console.log(RegExp["$`"]);//空

//最近一次匹配時右邊的字元
console.log(RegExp.rightContext);// js
console.log(RegExp["$'"]);// js

//最近一次匹配到的子選項（分組中的內容）
console.log(RegExp.lastParen);// j
console.log(RegExp["$+"]);// j

//捕獲分組
console.log(RegExp.$1);// j

string 對象中，與正則相關的方法

str.search()  與是否全局無關，只查找一個，如果有，就返回 index

如果沒有，就返回 -1

var str="js js";
var pattern=/(j)s/;
console.log(str.search(pattern));//0
var pattern=/aa/;
console.log(str.search(pattern));//-1

str.match()

普通匹配時與 exec 相同

全局匹配時：直接返回所有匹配的元素，分組會失效

var str="js js";
var pattern=/(j)s/;
console.log(str.match(pattern));//(2) ["js", "j", index: 0, input: "js js", groups: undefined]
var pattern=/aa/;
console.log(str.match(pattern));//null

var pattern=/(j)s/g;
console.log(str.match(pattern));//(2) ["js", "js"]
var pattern=/aa/;
console.log(str.match(pattern));//null

str.match( pattern )  

非全局匹配時才能返回分組中的內容

全局匹配時會返回所有匹配到的字元

m 和 g 組合，結合首尾匹配，體現

var str="1.js\n2.js\n3.js";
var pattern=/js$/g;//匹配行尾的js，預設是一行
console.log(str.match(pattern));//["js"]

var pattern=/js$/mg;//匹配行尾的js，預設是多行
console.log(str.match(pattern));//(3) ["js", "js", "js"]

str.split()  字元串分割，轉為數組

var str="1,2,3";
console.log(str.split(","));//(3) ["1", "2", "3"]

var str="1,  2  , 3";
var pattern=/\s*,\s*/g;
console.log(str.split(pattern));//(3) ["1", "2", "3"]

str.replace()  

var str="i love js js";
console.log(str.replace("js","html"));//i love html js

var pattern=/js/g;
console.log(str.replace(pattern,"html"));//i love html html

replace 替換時間格式

var str="2020-2-15";
var pattern=/-/g;
console.log(str.replace(pattern,"/"));//2020/2/15

使用 $n 進行分組引用

var str="i love pink";
var pattern=/(pink)/g;
document.write(str.replace(pattern,"<span style='background:pink'>$1</span>"));

 敏感詞的過濾

var str="中國軍隊和阿扁一起辦證";
var pattern=/國軍|阿扁|辦證/g;
document.write(str.replace(pattern,"*"));//中*隊和*一起*

一個文字對應一個 * 號

$0 是每次匹配到的內容

var str="中國軍隊和阿扁一起辦證";
var pattern=/國軍|阿扁|辦證/g;
document.write(str.replace(pattern,function($0){
    console.log($0);
    var result="";
    for(var i=0;i<$0.length;i++){
        result+="*";
    }
    return result;
}));//中**隊和**一起**

 f5  淺刷新

ctrl+f5  深度刷新

常用的正則表達式：

1、QQ號：

全數字 首位不是0  最少5位  （目前最多11位，以後可能會擴增）

/^[1-9]\d{4,10}$/
/^[1-9]\d{4,}$/

2、用戶名、昵稱

2-18位  中英文數字及下劃線組成

/^[\ue400-\u9fa5\w]{2,18}$/
/^[\ue400-\u9fa5a-zA-Z0-9_]{2,18}$/

3、密碼

6-16位  不能有空白符  區分大小寫

/^\S{6,16}$/

4、去除字元串首尾的空白字元

首先是去除首部或者尾部

var str=" cyy ";
console.log("|"+str+"|");// | cyy |

var pattern=/^\s+/;
str=str.replace(pattern,"");//替換左邊空白符

var pattern2=/\s+$/;
/*
這裡使用 \s+ 比使用 \s* 效率高
\s* 無論如何都會進行替換，哪怕沒有空白符
\s+ 只在有空白符的時候進行替換，否則直接返回
 */
str=str.replace(pattern2,"");//替換右邊空白符

console.log("|"+str+"|");// |cyy|

同時去除首尾空白符

var str=" cyy ";
console.log("|"+str+"|");// | cyy |

var pattern=/^\s+|\s+$/g;
str=str.replace(pattern,"");//替換左右空白符
console.log("|"+str+"|");// |cyy|

var str=" cyy ";
console.log("|"+str+"|");// | cyy |

function trim(str){
    return str.replace(/^\s+/,"").replace(/\s+$/,"");
}
console.log("|"+trim(str)+"|");// |cyy|

5、轉駝峰

str.replace(pattern, 要替換的內容） 第二個參數可以是一個匿名函數的返回值

匿名函數的參數中，第一個參數是匹配的內容，第二個參數開始是分組捕獲的內容

var str="background-color";
var pattern=/-([a-z])/gi;//  此處匹配到-c

//因為在匹配的