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

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/15/12313738.html
-Advertisement-
Play Games

正則表達式都是操作字元串的 作用：對數據進行查找、替換、有效性驗證 創建正則表達式的兩種方式： // 字面量方式 /js/ // 構造函數方式 regular expression new RegExp() 普通字元：字母 數字 漢字 _ 空格 ; , @ （沒有特殊含義的符號） 兩種匹配的方式： ...


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

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

 

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

// 字面量方式
/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

//因為在匹配的
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML連載68-形變中心點、形變中心軸
    一、 形變中心點介紹 <style> ul li { width: 100px; height: 100px; list-style: none; float:left; margin:0 auto; /*transform-origin:200px 0px;*/ transform-origin: ...
  • uniapp簡易直播
    實驗準備 1. 在伺服器部署 作為我們直播推流和拉流的伺服器（如果服務商選擇七牛，也是直接給地址推流）。為了加快部署，我在這一步使用Docker。 2. 記下推流地址（我本地搭建的： ） 3. 新建Uniapp項目 4. 點擊項目下方的 文件，點擊APP常用其他設置 去除V3編譯器 （Hbuilde ...
  • 前端：CSS第四章第一節
    第一部分：樣式規則 塊級元素一行只有一個，比如P標簽 CSS層疊樣式表，意思就是樣式是可以疊加的，比如下麵的代碼 <style> .ok{ color: aqua; } .blue{ color: #5283ff; }/*p名詞叫標簽選擇器*/ p{ color: black; font-size: ...
  • JavaScript 基礎學習（二）js 和 html 的結合方式
    第一種 使用一個標簽 第二種 使用 script 標簽，引入一個外部的 js 文件 需要創建一個js文件寫js代碼 使用第二種方式時候，不需要在script標簽裡面寫js代碼 第三種： 與HTML標簽中屬性結合 註意事項 script標簽用於引入外部文件，就不能再編寫其他script代碼了，即使編寫 ...
  • JS常見的表單驗證，H5自帶的驗證和正則表達式的驗證
    H5驗證 自帶的驗證無法滿足需求： <form action="" method="get"> name:<input type="text" name="name"><br> email:<input type="email" name="email"><br> age:<input type=" ...
  • JavaScript 基礎學習（一）JavaScript 簡介
    定義 JavaScript是基於對象和事件驅動的語言，應用與客戶端。其中： 基於對象：提供好了很多對象，可以直接拿過來使用 事件驅動：html做網站靜態效果，javascript動態效果(網頁能根據客戶操作事件作出響應) 客戶端：專門指的是瀏覽器 特點 解釋型語言：無需編譯，直接運行 交互性：信息的 ...
  • position屬性值4缺一帶你瞭解相對還是絕對抑或是固定定位
    阿基米德說“給我一個支點,我能翹起整個地球”，在HTML頁面中，給你一個坐標，可以把任何一個元素定位目標點，這就是定位！CSS有三種基本的定位機制：相對定位、絕對定位、固定定位，決定定位的position屬性的值有static預設標準流，當然這個就不用多說了；fixed固定定位，releative相... ...
  • getElementsByTagName得到的對象
    今天練習使用DOM創建html元素，想通過getElementsByTagName("body")獲得body對象，然後建立和新創建的元素的關係，如下圖： 其實，getElementsByTagName("body")得到的是一個偽數組，需要按照數組的訪問方式進行方式，但是不能調用數組的方法，若需調 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類