一文帶你徹底搞懂JavaScript正則表達式

Posted on by

正則表達式的概述

什麼是正則表達式

正則表達式( Regular Expression ) 是用於匹配字符串中字符組合的模式。在js中，正則表達式也是對象！

正則表達式的作用

  • 正則表達式通常被用來檢索、替換那些符合某個模式（規則）的文本。例如：我們在寫登錄註冊功能的時候使用的表單驗證(對用戶名、密碼進行一些字符或長度進行限制) ===> (匹配)
  • 正則表達式還常用於過濾掉頁面內容的一些敏感詞匯。例如：我們平常在打遊戲時候的口吐芬芳被換成瞭***🌝 ===> (替換)
  • 正則表達式從字符串中獲取我們想要的特定部分。例如：我們在逛淘寶的時候在搜索框中搜索內容，會彈出很多與搜索相關的提示內容 ===> (提取) etc…

正則表達式的特點

  1. 靈活性、邏輯性和功能性非常的強
  2. 可以迅速的用極簡單的方式達到字符串的復雜控制
  3. 對於剛接觸的人來說，比較晦澀難懂(缺點)
  4. 在實際開發中一般都是拿來主義，直接cv調用🎯，但是你得懂，這樣的話你可以進行簡單的修改！

正則表達式在js中的使用

創建正則表達式

在js中可以通過兩種方式創建正則表達式

利用 RegExp 對象來創建

let regexp = new RegExp(/123/);
    console.log(regexp); //  /123/

利用字面量創建(推薦使用!)

let rg = /123/
    console.log(rg); //  /123/

測試正則表達式 test

雖然在上面我們創建瞭正則表達式，但是在實際使用中，是要匹配正則表達式的，這裡的話就引入瞭test

test() 是正則對象方法，用於檢測字符串是否符合該規則，該對象會返回true或false，其參數是測試字符串

代碼書寫:regexObj.test(str)

1. regexObj 是我們寫的正則表達式

2. str 是我們要測試的文本

3. 就是檢測str文本是否符合我們所寫的正則表達式規范

let rgp = /123/
        console.log(rgp.test(123));  // true

正則表達式中的特殊字符

正則表達式的組成

一個正則表達式可以由簡單的字符構成，比如/abc/,也可以是簡單和特殊字符的組合，比如/ab*c/。其中特殊字符也被成為元字符,在正則表達式中是具有特殊意義的專用字符，如 ^、&、+ 等等。

特殊符號鏈接直達 ===> 🔔正則表達式mdn🔔

邊界符

正則表達式中的邊界符用來提示字符所在的位置，主要有兩個字符

邊界符 說明
^ 表示匹配行首的文本(從誰開始)
$ 表示匹配行尾的文本(以誰結束)

在上方內容中講解創建正則表達式，如果我們僅僅采取/abc/這種沒有特殊符號的方式，會發生一些情況：

let rg = /123/
        console.log(rg.test(123));  //true
        console.log(rg.test(11234));  //true

我們可以發現當我們測試的內容隻要是符合正則表達式都會打印出true，如果我們想設置以123開頭的呢?這就需要我們的特殊符號瞭！

let reg = /^abc/
        console.log(reg.test('abc')); //true
        console.log(reg.test('aabce')); //false
        console.log(reg.test('aaabcc')); //false

通過以上的方式，我們限制瞭測試的字符串必須符合以abc開頭的規范，所以下方兩行會返回false
當你需要精確匹配的時候，你可以通過控制開頭和結尾實現

let regs = /^abc$/
        console.log(regs.test('abc')); //true
        console.log(regs.test('abcd')); //false

該代碼表示，測試的字符串必須是abc，其餘的都會打印false

字符類

在實際開發過程中，我們不可能要匹配一連串的字符，我們需要的功能是我可以隨意去匹配，隻要滿足限制就行，字符類就可以解決這個問題。
字符類：表示有一系列的字符可以選擇，隻要匹配其中一個就可以瞭 符號:[]

舉例：let rg = /[abc]/ ,表示隻要測試字符串滿足 包含a 或 包含b 或 包含c 就返回true

我們可以加上特殊字符：let reg = /^[abc]$/,表示，你的測試字符串隻能是a 或者 b 或者c！

如果你想匹配一個范圍內的字符串可以使用特殊符號[-]

舉例 ： let reg = /^[A-z]$/,表示26個英語字母任何一個字母(大小寫均可)，都會返回true，但是隻能是其中的一個！

  • 字符組合
    我們可以設置更有靈活性的正則表達式let rg = /^[A-z0-9_-]$/,表示26個英語字符、個位數字、兩個符號任意一個都會打印true
  • 字符類中的^符號
    我們知道^符號在外部表示從誰開始的意思，但是一旦它也出現在字符類[]中，則表示取反的意思！
    舉例:let rg = /^[^A-z0-9_-]$/,第一個^表示從誰開始，第二個^表示對這個正則規范取反操作，如：不能是26個字母中的任意一個 etc…

量詞符

量詞符顧名思義就是與數量有關，這時你就要想一想它跟字符類的結合使用咯！量詞符用來設定某個模式出現的次數

量詞說明*重復零次或多次+重復一次或更多次?重復零次或一次{n}重復n次，n 是一個正整數，匹配瞭前面一個字符剛好出現瞭 n 次。{n,}重復n次或更多次，n 是一個正整數，匹配前一個字符至少出現瞭 n 次。{n,m}重復n到m次，如果 n 或者 m 的值是 0， 這個值被忽略。

*的使用

*相當於 >=0，可以出現0次或者很多次

let rg = /^a*$/，表示，a可以出現0次或者多次

let rg = /^a*$/;
        console.log(rg.test('')); //true
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //true

+的使用

相當於 >=1 可以出現一次或多次

let rg = /^a+$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //true

?的使用

相當於1 || 0

let rg = /^a?$/;
        console.log(rg.test('')); //true
        console.log(rg.test('a')); //true
        console.log(rg.test('aaa')); //false

{n}的使用(重點掌握)

let rg = /^a{3}$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //false
        console.log(rg.test('aaa')); //true

在這裡表示字符串a重復瞭三次

{n,}的使用(重點掌握)

let rg = /^a{3,}$/;
        console.log(rg.test('')); //false
        console.log(rg.test('a')); //false
        console.log(rg.test('aaa')); //true
        console.log(rg.test('aaaaa')); //true

在這裡表示字符串a必須要重復三次以及以上，否則打印false

{n,m}的使用(重點掌握)

let rg = /^a{3,16}$/;
    console.log(rg.test('')); //false
    console.log(rg.test('aaa')); //true
    console.log(rg.test('aaaaaaaaaaaaaaaaaaaaaaaaaaa')); //false

在這裡表示字符串a重復的區間是大於等於3 並且 小於等於16

結合某個模式應用

let reg = /^[A-z0-9_-]{3,16}$/
        console.log(reg.test('1018703239')); // true
        console.log(reg.test('101a24543_q')); //true

這個正則表達式其實就可以用來寫用戶名的表單驗證瞭！

括號總結

  • 大括號{} : 是 量詞符 ，表示重復的次數
  • 中括號[] : 是 字符集合, 表示匹配方括號中的任意字符
  • 小括號() : 表示優先級！

預定義類

預定義類指的是某些常見模式的簡寫方式。(簡化之前的寫法！)

預定類 說明
\d 匹配0-9之前的任意數字，相當於[0-9]
\D 匹配一個非數字字符。等價於 [^0-9]
\w 匹配一個單字字符（字母、數字或者下劃線）。等價於 [A-Za-z0-9_]
\W 匹配一個非單字字符。等價於 [^A-Za-z0-9_]
\s 匹配空格(包括換行符、制表符、空格符等等) ，相當於[\t\r\n\v\f]
\S 匹配非空格的字符，相當於[^\t\r\n\v\f]

舉例:

我們在這裡做一個需求，驗證座機號碼,座機號碼有兩種形式 010-12345678 或者 0530-1234567.

（註 ： 正則表達式中的或者符號為 ： |）

let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
        console.log(reg.test('010-12345678')); //true
        console.log(reg.test('0500-1234567')); //true

正則表達式的替換

1.replace替換

replace()方法可以實現替換字符串操作，用來替換的參數可以是一個字符串也可以是一個正則表達式

寫法：
stringObj.replace(regexp/substr,replacement)

  • 第一個參數 ： 被替換的字符串或正則表達式
  • 第二個參數 : 替換為的字符串
  • 返回值是一個替換完畢的新字符串

2.正則表達式參數

/表達式/[switch]
switch(也稱為修飾符)按照什麼模式來匹配，有三種常用的值：
g : 全局匹配
i : 忽略大小寫
g + i : 全局匹配 + 忽略大小寫

案例:

<body>
<textarea cols="30" rows="10" class="one"></textarea>
<div class="t"></div>
<script>
    let text = document.querySelector('.one')
    let ts = document.querySelector('.t')
    text.onblur = function () {
        ts.innerHTML = text.value.replace(/星星幣|牛哇/g, '**')
    }
</script>

在這裡就可以看到正則整體替換的效果瞭！

開發中常用正則表達式

  • Email地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
  • 手機號碼：^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
  • 國內座機電話號碼(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
  • 身份證號(15位、18位數字)，最後一位是校驗位，可能為數字或字符X：(\d{15}$)|(^\d{18}$)|(\d{17}(\d|X|x)$)
  • 帳號是否合法(字母開頭，允許5-16字節，允許字母數字下劃線)：1[a-zA-Z0-9_]{4,15}$
  • 密碼(以字母開頭，長度在6~18之間，隻能包含字母、數字和下劃線)：2\w{5,17}$
  • 日期格式：^\d{4}-\d{1,2}-\d{1,2}
  • 騰訊QQ號：[1-9][0-9]{4,} (騰訊QQ號從10000開始)

小結

前端的學習開發過程中正則表達式是必須要掌握的，在開發中登錄註冊，以及敏感詞匯的替換都需要正則表達式的作用，正則表達式上手非常的容易，在這篇文章中更多的去解析正則表達式文檔的api，api有更加詳細的大傢可以認真去看一下，這篇文章可以讓你解決絕大多數正則表達式的問題！

到此這篇關於徹底搞懂JavaScript正則表達式的文章就介紹到這瞭,更多相關js正則表達式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：