1. 程式人生 > 其它 >個人自學前端22-JS15-正則表示式

個人自學前端22-JS15-正則表示式

正則表示式

什麼是正則表示式?

正則表示式就是用來描述字串格式的規則。

在表單驗證中經常需要使用正則表示式。

例如,註冊一個賬戶,需要填寫郵箱地址,那你如何判斷使用者輸入的是郵箱格式呢?

自然,用迴圈和判斷一定可以寫出完整的檢測邏輯,但是真的很難很難。

如果使用正則表示式就會簡單得多。

我們只需要按郵箱格式,寫出郵箱格式的正則描述即可。

正則物件的建立:

1:let re = /正則表示式/;(perl風格的正則,最常用)

2:let re = new RegExp(); (構造方法,工作中不用)

一 正則的書寫

正則書寫最主要的兩個部分:範圍和數量.

範圍指的是:都是些什麼字元.

數量指的是:有多少個.

因此正則描述的總是:什麼什麼字元有多少個這樣的事情。

1.1 範圍

指定的字元和指定範圍的字元。

指定的字元就直接寫出對應的字元即可。

指定的範圍字元需要寫[].

// 這個正則表示的是:一個a字元.
let re = /a/;
// 這個正則表示的是:在一起的ab字元.
let re = /ab/;
// 這個正則表示的是:一個a或者一個b字元.
let re = /[ab]/;
let re = /[a|b]/;
// 這個正則表示的是:一個a-z之間的字元.
let re = /[a-z]/
// 這個正則表示的是:數字19.
let re = /19/;
// 這個正則表示的是:1或者9.
let re = /[19]/;
// 這個正則表示的是:0-9.
let re = /0-9/;
// 小寫的a-z或者大寫的A-Z
let re = /[a-zA-Z]/;
let re = /[a-z|A-Z]/;
// 除了小寫a-z
let re = /[^a-z]/;

1.2 數量

數量都需要寫在{}中,需要些在範圍後面.

如果數量是不確定的,需要用,(逗號)隔開.

// 一個a
let re = /a{1}/;
// 一個a或者b
let re = /[ab]{1}/;
// 兩個a
let re = /a{2}/;
// 1到3個a
let re = /a{1,3}/;
// 0到1個a (a可有可無)
let re = /a{0,1}/;
// 最少1個a,最多不限
let re = /a{1,}/;
// 最少0個a,最多不限.(可以沒有,有又可以有很多個)
let re = /a{0,}/;

1.3 簡寫

正則之所以難,就是採用了大量的簡寫.

範圍的簡寫:

[0-9] 可以簡寫為 \d (數字)

[a-zA-Z0-9_]可以簡寫為 \w

(英文數字和下劃線)

\s => 表示空格

. => 表示任意字元. (注意, 反斜槓.表示點)

\D => 表示非數字

\W => 非英文數字和下劃線

\S => 非空格

數量的簡寫

{1} 可以省略

{1,} 簡寫為 +

{0,1} 簡寫為 ?

{0,} 簡寫為 *

1.4 修飾符

正則有兩個常用修飾符,i和g

i => 區分大小寫

g => 全域性匹配

// 以下表示全域性比配,不區分大小寫的a-z英文字母.
let re = /[a-z]/ig;

1.5 位置的正則

有時候相同的字元,出現在不同的位置,為了區分它們,需要描述它們各自的位置.(難)

1.5.1 行首:^

1.5.2 行尾:$

// 行首的a
let re = /^a/;
// 行尾的a
let re = /a$/;
// 行首是a行尾是b的ab.
let re = /^ab$/;

1.5.3 預查:

正向肯定預查: ?= (後面是)

正向否定預查: ?! (後面不是)

反向肯定預查: ?<= (前面是)

反向否定預查: ?<! (前面不是)

注意,預查寫法都應該些在 ()內

// 這個字元有兩個a.可以通過行首行尾的a來區分它們.還可以通過預查來區分.
let str = 'aba';
// 後面是b的a
let re = /a(?=b)/;
// 後面不是b的a
let re = /a(?!b)/;
// 前面是b的a
let re = /(?<=b)a/;
// 前面不是b的a
let re = /(?<!b)a/

1.5.4 單詞邊界

js正則中的單詞就是 \w,非單詞就是 \W

\b => 單詞邊界,意即單詞和非單詞之間的位置。也包括單詞和行首行尾之間的位置。

\B => 非單詞邊界,意即單詞和單詞之間的位置。

let re = /\B/g;
'abc'.replace(re,'*'); // "a*b*c"
let re = /\b/g;
'ab$c'.replace(re,'*'); // "*ab*$*c*"