1. 程式人生 > 其它 >JavaScript基礎之正則表示式

JavaScript基礎之正則表示式

技術標籤:Javascriptjavascript

1.概念

正則表示式(Regular Expression)是用於描述一組字串特徵的模式,用來匹配特定的字串。通過特殊字元+普通字元來進行模式描述,從而達到文字匹配目的工具。

正則表示式目前被整合到了各種文字編輯器/文字處理工具當中

2.建立方式

(1) 字面量建立

var reg = /day/ig;

(2) 建構函式建立

var reg = new RegExp("day","ig");

3.語法

(1) 規則(表示式) 寫在//之間

2.修飾符i (忽略大小寫)g (全域性匹配(匹配整個字串多次,也稱為貪婪模式

)如果不加g預設只匹配一次,也稱為非貪婪模式)

// 沒有加忽略大小寫
var str = "good good study , Day dAy up";
var reg = /day/;
var result = str.search(reg);//search方法是返回某個或某段字元 在字串中第一次出現的位置   => 存在 返回下標,不存在返回-1
console.log(result);//-1

// 加忽略大小寫
var str = "good good study , Day dAy up";
var reg = /day/i;//忽略大小寫
var result = str.search(reg);
console.log(result);//18

// 開啟非貪婪模式
var str = "good good study , day day up";
var reg = /day/; //忽略大小寫
var result = str.replace(reg, "money");
console.log(result); //good good study , money day up

// 開啟貪婪模式
var str = "good good study , day day up";
var reg = /day/g; //忽略大小寫 全域性匹配
var result = str.replace(reg, "money");
console.log(result); //good good study , money money up

4. 正則的相關方法

(1) test() 判斷字串中是否 含有 符合規則的 某個或某段字元 有=> true, 沒有=>false

var str = "good good study , Day dAy up";
var reg = /day/;
var result = reg.test(str);
console.log(result); //false

var str = "good good study , Day dAy up";
var reg = /day/ig;
var result = reg.test(str);
console.log(result); //true

(2) exec()將符合規則的某個或某段字元提取出來放到陣列中(始終只匹配一次),如果沒有則返回null

var str = "good good study , Day dAy up";
var reg = /day/ig;
var result = reg.exec(str);
console.log(result);

輸出結果:

(3) lastIndex返回下一次匹配時下標的開始位置(預設0)(前提:全域性匹配)

var str = "good good study , Day dAy up";
var reg = /day/ig;
console.log(reg.lastIndex);// 0
var result = reg.test(str);
console.log(result, reg.lastIndex);// true  21

var result = reg.test(str);
console.log(result, reg.lastIndex);// true  25

var result = reg.test(str);
console.log(result, reg.lastIndex);// false  0

5. 正則表示式中的字元

(1) 字面量字元(普通字元)

a-zA-Z0-9

(2) 元字元(特殊字元)

1.限定符 指定正則表示式中的給定元件(某個或某段字元=>子表示式)需要匹配多次才滿足

* 匹配前面的子表示式出現0次或多次

+ 匹配前面的子表示式出現1次或多次{1,}

? 匹配前面的子表示式出現0次或1次{0,1}

{n} 匹配n次

{n,} 匹配至少n次

{n,m}匹配至少n次,最多m次

例項:

//  * 匹配前面的子表示式出現0次或多次
var str = "Mondy";
var reg = /da*y/ig; //可以匹配 dy day daay daay....
var result = reg.test(str);
console.log(result); //true

// + 匹配前面的子表示式出現1次或多次{1,}
var str = "Mondy";
var reg = /da+y/ig; //可以匹配 day daay daay....
var result = reg.test(str);
console.log(result); //false

// ? 匹配前面的子表示式出現0次或1次{0,1}
var str = "Mondy";
var reg = /da?y/ig; //可以匹配 dy day
var result = reg.test(str);
console.log(result); //true

// {n} 匹配n次
var str = "Mondaaay";
var reg = /da{3}y/ig; //可以匹配 daaay
var result = reg.test(str);
console.log(result); //true

// {n,} 匹配至少n次
var str = "Mondaay";
var reg = /da{2,}y/ig; //可以匹配 daay daaay...
var result = reg.test(str);
console.log(result); //true

//{n,m}匹配至少n次,最多m次
var str = "Mondaaay";
var reg = /da{2,3}y/ig; //可以匹配 daay daaay
var result = reg.test(str);
console.log(result); //true

2. 定位符

^匹配字串開始的位置以...開頭

$匹配字串結束的位置以...結尾

Tips:

單獨使用^和$依舊是包含關係不會將規則定死

同時使用^和$才會在一定程度上將規則定死

3. 字元匹配符

[xyz] 字元集合,匹配xyz中的任意一個字元

[0123456789]=>[0-9]匹配數字

[qwertyuiopasdfghjklzxcvbnm]=>[a-z]匹配小寫字母

[QWERTYUIOPASDFGHJKLZXCVBNM]=>[A-Z]匹配大寫字母

[0-9a-zA-Z_]匹配數字大小寫字母_中的任意一個

注意在字元匹配符中^代表取反

[^xyz]匹配除了xyz以外任意一個字元

[^0-9]匹配非數字但是範圍太大

[^a-z]匹配非小寫

[^A-Z]匹配非大寫

[^0-9a-zA-Z_]匹配非數字大小寫字母_

字元簇(官方已經規定好的字元集合)

\d 匹配數字[0-9]

\D 匹配非數字[^0-9]

\w 匹配數字大小寫字母_[0-9a-zA-Z_]

\W 匹配非數字大小寫字母_[^0-9a-zA-Z_]

\s 匹配空白字元(換行符(\n)產生的空格/回車符(\r)產生空格/空格)

\S 匹配非空白字元(除了空白符以外的任意字元)

. 匹配除換行符(\n)以外的單個字元(任意字元)

[\u4e00-\u9fa5]匹配中文

關於空白字元

\n 換行符

\r 回車符

\f 分頁符

\t 製表符

\v 垂直製表符

轉義字元

Tips: 其中 \ 為轉義字元,在表示某一些特殊含義的字元時,需要新增"\"轉義字元,例如:要匹配+,就要寫成\+

var str = "1+1";
var reg = /1+1/;
var result = reg.test(str);
console.log(result); // false

var str = "1+1";
var reg = /1\+1/;
var result = reg.test(str);
console.log(result); // true

4.選擇匹配符

| 可以匹配多個規則(在正則表示式中代表"或"的關係 一般配合() 使用)

/(red|blue|green)/ 匹配red ,blue green中的任意一個

6.綜合案例

例項1:

// 手機號驗證
var phone = "17786531572";
var reg = /^1[3-9][0-9]{9}$/;
var result = reg.test(phone );
console.log(result);//true

例項2:

// 使用者名稱驗證
var user = "aaaaa哈哈";
var reg = /^[a-zA-Z][\w$_\u4e00-\u9fa5]{5,11}$/;
var result = reg.test(user );
console.log(result); //true

例項3:

// 郵箱驗證
var email = "[email protected]";
var reg = /^\w{6,18}@\w+\.(com|cn|edu)$/;
var result = reg.test(email );
console.log(result); //true

例項4:

// 網址驗證
var str = "https://www.baidu.com";
var reg = /^(http|https):\/\/(www.)?\w{2,}\.(com|edu|cn|net)$/;
var result = reg.test(str);
console.log(result); //true

例項5:

// 日期判斷驗證
var str = "2021-1-7";
var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;
var result = reg.test(str);
console.log(result); //true

例項6:

// QQ號判斷驗證
var str = "534532";
var reg = /^[1-9]\d{4,}$/;
var result = reg.test(str);
console.log(result); //true