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 >1</li>
        <li >2</li>
        <li >3</li>
        <li >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 >1</li>
        <li >2</li>
        <li >3</li>
        <li >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

//因為在匹配的結果中，第一個引數是匹配的內容，第二個引數開始是分組的內容
//因此此處all為 -c   letter為 c
//也可以用$0 $1表示
console.log(str.replace(pattern,function(all,letter){
    return letter.toUpperCase();
}));// backgroundColor
console.log(str.replace(pattern,function($0,$1){
    return $1.toUpperCase();
}));// backgroundColor

// 封裝轉駝峰函式
function toCamelCase(str){
    return str.replace(pattern,function($0,$1){
        return $1.toUpperCase();
    });
}
console.log(toCamelCase(str));//backgroundColor

6、匹配HTML標簽

匹配開始標簽和結束標簽，標簽中的內容不要

var str="<p style='color:red' class='active'>這是段落</p>";
var pattern=/<.+?>/g;//非貪婪模式匹配兩個尖括號之間的內容
console.log(str.match(pattern));

var pattern=/<[^>]+>/g;//兩個尖括號內部，沒有匹配到結束的尖括號
console.log(str.match(pattern));

7、email 郵箱

[email protected]

/^(\w+\.)*\w+@(\w+\.)+[a-z]$/i

8、URL

/*
http://www.baicu.com
http或者https 可有可無
除了 ： 和 / ，其他的都屬于主機名
*/ 

//簡化版，要求不高
/^(https?:\/\/)?[^:\/]+(:\d+)?(\/.*)?$/  

//精確版
//協議： http://  https://   ftp://  mailto://   file:///

//匹配主機名 www.baidu.com
//可以有連字符，但是連字符不能作為開頭和結尾
/^([a-z0-9]+\.|[a-z0-9]+-[a-z0-9]+\.)*[a-z]+$/i

可以把經常用的正則存到一個物件中，如：

var regExp={
    "chinese":/[\u4e00-\u9fa5]/,
    "qq":/^[1-9]\d{4,}$/,
    ...
}

制作一個簡易的正則測驗工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#abcdef;
        }
        .wrap{
            width:1000px;            
            margin:10px auto;
            font-size:14px;
        }
        .container{
            width:650px;
            float:left;
        }
        .wrap h1{
            text-align: center;
            font-size:20px;
        }
        .textBox{
            border:1px solid #fff;
            padding:5px;
            width:638px;
            height:130px;
            border-radius:5px;
            resize:none;/*不允許拖拽輸入框*/
            margin-top:15px;
        }
        div.textBox{
            background:#eee;
        }
        .pattenInput{
            width:180px;
            padding:5px;
            border:1px solid #fff;
            border-radius:5px;
        }
        .matchBtn{
            width:100px;
            text-align: center;
            padding:5px;
            background-color: pink;
            border:none;
            border-radius:5px;
            margin-left:10px;
        }
        #matchResult span,
        #replaceResult span{
            background:orange;
        }
        .list{
            width:280px;
            float:right;
            border:1px solid #fff;
            border-radius:5px;
            background-color: #fff;
            margin-top:14px;
            padding:20px;
        }
        .list dt{
            font-weight:bold;
            font-size:18px;
            margin-bottom:10px;
            color:#333;
        }
        .list dd{
            height:40px;
            line-height:40px;
        }
        .list dd a{
            display: block;
            text-decoration: none;
            color:#333;
        }
        .list dd a:hover{
            color:orange;
        }
        .footer{
            text-align: center;
        }
        .footer{
            zoom:1;
        }
        .wrap::after{
            content:"";
            display: block;
            clear:both;
        }
        .footer span{
            color:orange;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <h1>正則運算式測驗工具</h1>
        <div class="container">
            <textarea id="userInput" class="textBox" placeholder="請輸入需要匹配的文本"></textarea>
            <p>
                正則運算式：<input type="text" placeholder="請輸入正則運算式" class="pattenInput" id="pattenInput">
                <input type="checkbox" name="modifier" value="i">忽略大小寫
                <input type="checkbox" name="modifier" value="g">全域匹配
                <input type="checkbox" name="modifier" value="m">多行匹配
                <input type="button" value="測驗匹配" id="matchBtn" class="matchBtn">
            </p>
            匹配結果：
            <!-- 原來使用textarea，內部文本不允許加標簽，因此換為div -->
            <div id="matchResult" class="textBox" placeholder="請輸入需要匹配的文本"></div>
            <p>
                替換文本：<input type="text" placeholder="請輸入替換文本" class="pattenInput" id="replaceInput">
                <input type="button" value="正則替換" id="replaceBtn" class="matchBtn">
            </p>
            替換結果：
            <!-- 原來使用textarea，內部文本不允許加標簽，因此換為div -->
            <div id="replaceResult" class="textBox" placeholder="請輸入需要匹配的文本"></div>
        </div>
        <dl class="list" id="list">
            <dt>常用正則運算式</dt>
            <dd><a href="javascript:void(0)" title="[\u4e00-\u9fa5]">匹配中文字符</a></dd>
            <dd><a href="javascript:void(0)" title="[1-9]\d{4,}">QQ</a></dd>
        </dl>
    </div>
    <p class="footer">本程式由<span>cyy</span>制作，歡迎大家使用~</p>

<script>
    var userInput=document.getElementById("userInput");
    var pattenInput=document.getElementById("pattenInput");
    var modifiers=document.getElementsByName("modifier");
    var matchBtn=document.getElementById("matchBtn");
    var matchResult=document.getElementById("matchResult");

    var replaceInput=document.getElementById("replaceInput");
    var replaceBtn=document.getElementById("replaceBtn");
    var replaceResult=document.getElementById("replaceResult");

    var links=document.getElementById("list").getElementsByTagName("a");

    var pattern="";
    var modifier="";

    //處理模式修飾符
    for(var i=0;i<modifiers.length;i++){
        modifiers[i].onclick=function(){
            modifier="";//每次點擊后先清空原來的
            for(var j=0;j<modifiers.length;j++){
                if(modifiers[j].checked){
                    modifier+=modifiers[j].value;
                }
            }
        }
    }

    //點擊按鈕進行匹配
    matchBtn.onclick=function(){
        //沒有輸入文本
        if(!userInput.value){
            alert("請輸入待匹配的文本~");
            userInput.focus();//獲取游標
            return;//不再執行下面的腳本
        }

        //沒有輸入正則
        if(!pattenInput.value){
            alert("請輸入待匹配的文本~");
            pattenInput.focus();
            return;
        }

        pattern=new RegExp("("+pattenInput.value+")",modifier);
        console.log(userInput);
        matchResult.innerHTML=pattern.exec(userInput.value) ? userInput.value.replace(pattern,"<span>$1</span>"): "(沒有匹配到哦~)";
    }

    //點擊按鈕進行替換
    replaceBtn.onclick=function(){
        //沒有輸入文本
        if(!userInput.value){
            alert("請輸入待匹配的文本~");
            userInput.focus();//獲取游標
            return;//不再執行下面的腳本
        }

        //沒有輸入正則
        if(!pattenInput.value){
            alert("請輸入待匹配的文本~");
            pattenInput.focus();
            return;
        }

        //沒有輸入替換文本
        if(!replaceInput.value){
            alert("請輸入要替換的文本~");
            replaceInput.focus();
            return;
        }

        pattern=new RegExp("("+pattenInput.value+")",modifier);
        replaceResult.innerHTML=userInput.value.replace(pattern,"<span>"+replaceInput.value+"</span>");
    }

    //點擊右側快捷正則
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            pattenInput.value=this.title;//this指當前點擊的元素
        }
    }



</script>
</body>
</html>

補充：

() 分組可以捕獲內容

(?:) 不參與捕獲

$1 $2... 分別表示捕獲到的內容

如何獲取捕獲到的內容：

exec() 回傳的陣列中，第一個是匹配到的內容，第二個開始是捕獲的內容

/\1/ 模式中，直接在正則中參考捕獲到的內容

replace() 的第2個引數中，$1 （如果第2個引數是匿名函式，這個匿名函式的第一個引數是匹配到的內容，第二個引數開始是捕獲到的內容）

RegExp.$1

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/149383.html

標籤：JavaScript

上一篇：前端手寫代碼原理實作

下一篇：getElementsByTagName得到的物件