怎么在javascript中使用正則表達(dá)式實(shí)現(xiàn)位置匹配

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么在javascript中使用正則表達(dá)式實(shí)現(xiàn)位置匹配，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一、前言

正則表達(dá)式是匹配模式，要么是匹配字符，要么匹配位置。

二、什么是位置

位置：相鄰字符之間的位置。

三、如何匹配位置

在ES5中，共有6個(gè)錨：^, $, \b, \B, (?=p), (?!p)

可視化形式：

RegExp：/^$\b\B(?=a)(?!b)/g

3.1 ^和$

^(脫字符)匹配開(kāi)頭，在多行匹配中匹配行開(kāi)頭。

$(美元符)匹配結(jié)尾，在多行匹配中匹配行結(jié)尾。

比如：我們把字符串的開(kāi)頭和結(jié)尾用#替換（位置可以替換成字符的）：

var result = "hello".replace(/^|$/g, '#');
console.log(result);
// "#hello#"

多行匹配模式（有修飾符m）時(shí)，二者是行的概念，我們需要注意：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
// #I#// #love#// #javascript#

3.2 \b和\B

\b是單詞邊界，具體就是\w和\W之間的位置，也包括\w與^之間的位置，和\w和$之間的位置。

比如考察文件名"[JS] Lesson_01.mp4"中的\b，如下：

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// "[#JS#] #Lesson_01#.#mp4#"

首先，我們知道\w是字符組[0-9a-zA-Z]的簡(jiǎn)寫(xiě)，即使字母數(shù)字或者下劃線中任何一個(gè)字符。而\W是字符組[^0-9a-zA-Z]的簡(jiǎn)寫(xiě)，即\W是\w以外的任何一個(gè)字符。

我們?cè)賮?lái)看#是怎么來(lái)的：

第 1 個(gè)，兩邊字符是 "[" 與 "J"，是 \W 與 \w 之間的位置。

第 2 個(gè)，兩邊字符是 "S" 與 "]"，也就是 \w 與 \W 之間的位置。

第 3 個(gè)，兩邊字符是空格與 "L"，也就是 \W 與 \w 之間的位置。

第 4 個(gè)，兩邊字符是 "1" 與 "."，也就是 \w 與 \W 之間的位置。

第 5 個(gè)，兩邊字符是 "." 與 "m"，也就是 \W 與 \w之間的位置。

第 6 個(gè)，位于結(jié)尾，前面的字符 "4" 是 \w，即 \w 與 $ 之間的位置。

知道了\b概念后，那\B就好理解了，\b是單詞邊界，\B是非單詞邊界

var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

3.3 (?=p) 和 (?!p)

(?=p)其中p是一個(gè)子模式，即 p前面的位置 （該位置后面的字符要匹配p）

比如：(?=e)，表示的是e字符前面的位置；

var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// "he#l#lo"

而(?!p)就是(?=p)的反面意思

var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
// "#h#ell#o#"

二者的學(xué)名分別是 positive lookahead 和 negative lookahead。

中文翻譯分別是 正向先行斷言 和 負(fù)向先行斷言 。

ES5 之后的版本，會(huì)支持 positive lookbehind 和 negative lookbehind。

具體是 (?<=p) 和 (?<!p)。

四、位置特性

對(duì)于位置的理解，我們可以累計(jì)額成空字符""。

比如"hello"字符串等價(jià)于如下形式：

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "" + "o" + "";

也等價(jià)于

"hello" == "" + "" + "hello"

因此，把 /^hello$/ 寫(xiě)成 /^^hello$$$/，是沒(méi)有任何問(wèn)題的：

var result = /^^hello$$$/.test("hello");
console.log(result);
// true

也就是說(shuō)，字符之間的位置，可以寫(xiě)成多個(gè)。

注：把 位置 理解 空字符 ，是對(duì)位置非常有效的理解方式

五、相關(guān)案例

5.1不匹配任何東西的正則

/.^/

正則要求 只有一個(gè)字符，但是該字符后面是開(kāi)頭 ，而這樣的字符串是不存在的。

5.2數(shù)字的千分位分隔符表示法

比如吧12345678，變成12,345,678。

分析：那就是需要把相應(yīng)的位置替換成","

5.2.1弄出來(lái)最后一個(gè)逗號(hào)

正則：/(?=\d{3}$)/

var result = "12345678".replace(/(?=\d{3}$)/g, ',')console.log(result);
// 12345,678

其中(?=\d{3}$)匹配\d{3}$前面的位置。而\d{3}$匹配的是目標(biāo)字符串最后那3為數(shù)字。

5.2.2弄出來(lái)多有逗號(hào)

因?yàn)槎禾?hào)的出現(xiàn)的位置，要求后邊3個(gè)數(shù)字一組，也就是\d{3}至少出現(xiàn)1次。

可以使用量詞 + ：

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')console.log(result);
// 12,345,678

5.2.3匹配其余案例

寫(xiě)完正則后，是需要舉個(gè)別案例來(lái)驗(yàn)證的，就會(huì)發(fā)現(xiàn)問(wèn)題：

var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')console.log(result);
// ,123,456,789

上面的正則，僅僅是表示把從結(jié)尾向前數(shù)，一旦是3的倍數(shù)買(mǎi)酒吧前面的位置替換為逗號(hào)。

還需要要求：匹配的這個(gè)位置不能是開(kāi)頭。

我們知道開(kāi)頭的匹配是使用^，但是不是開(kāi)頭怎么整？

使用(?!^)

var regex = /(?!^)(?=(\d{3})+$)/g;var result = "12345678".replace(regex, ',')console.log(result);
// "12,345,678"result = "123456789".replace(regex, ',');
console.log(result);// "123,456,789"

5.2.4支持其他形式

如果要把 "12345678 123456789" 替換成 "12,345,678 123,456,789"。

此時(shí)我們需要修改正則，把里面的開(kāi)頭 ^ 和結(jié)尾 $，修改成 \b：

var string = "12345678 123456789",regex = /(?!\b)(?=(\d{3})+\b)/g;
var result = string.replace(regex, ',')console.log(result);
// "12,345,678 123,456,789"

其中(?!\b)怎么理解？

要求是當(dāng)前的一個(gè)位置，但不是\b前面的位置，其實(shí)(?!\b)說(shuō)的是\B。

因此最終正則變成了：/\B(?=(\d{3})+\b)/g。

可視化形式：

RegExp：/\B(?=(\d{3})+\b)/g

5.2.5貨幣格式化

千分符表示法一個(gè)常見(jiàn)的應(yīng)用就是貨幣格式化。

把這個(gè)字符串：

格式化：

$ 1888.00

實(shí)現(xiàn)：

function format (num) {return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/g, ",").replace(/^/, "$ ");
};
console.log( format(1888) );
// "$ 1,888.00"

5.3驗(yàn)證密碼的問(wèn)題

密碼長(zhǎng)度6-12，由數(shù)字，小寫(xiě)字母，大寫(xiě)字母組成，但必須至少包括2種字符。

寫(xiě)成多個(gè)正則來(lái)判斷，比較容易，但是要寫(xiě)成一個(gè)正則就比較困難。

來(lái)看看我們對(duì)于位置的理解是否深刻。

5.3.1簡(jiǎn)化

暫時(shí)不考慮"必須至少包含2種字符"這個(gè)條件，可以容易寫(xiě)出：

var regex = /^[0-9A-Za-z]{6,12}$/;

5.3.2判斷是否包含有某一種字符

假設(shè)，要求我們必須包含數(shù)字，怎么整？此時(shí)我們可以使用(?=.*[0-9])來(lái)實(shí)現(xiàn)。

正則變成：

var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

5.3.3同時(shí)包含具體兩種字符

比如同時(shí)包含數(shù)字和小寫(xiě)字母，可以使用(?=.*[0-9])(?=.*[a-z])來(lái)實(shí)現(xiàn)。

正則變成：

var regex = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;

5.3.3具體實(shí)現(xiàn)

把原題變成下列幾種情況：

1、同時(shí)包含數(shù)字和小寫(xiě)字母；

2、同時(shí)包含數(shù)字和大寫(xiě)字母；

3、同時(shí)包含小寫(xiě)字母和大寫(xiě)字母；

4、同時(shí)包含數(shù)字，小寫(xiě)字母和大寫(xiě)字母。

以上的4中情況是 或 的關(guān)系（實(shí)際上，第四條可以不用）。

最終答案：

var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[AZ]))^[0-9A-Za-z]{6,12}$/;console.log( regex.test("1234567") );
 // false 全是數(shù)字console.log( regex.test("abcdef") ); 
// false 全是小寫(xiě)字母console.log( regex.test("ABCDEFGH") ); 
// false 全是大寫(xiě)字母console.log( regex.test("ab23C") ); 
// false 不足6位console.log( regex.test("ABCDEF234") ); 
// true 大寫(xiě)字母和數(shù)字console.log( regex.test("abcdEF234") ); 
// true 三者都有

可視化形式：

RegExp：/((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[AZ]))^[ 0-9A-Za-z]{6,12}$/

分析：

上面正則看起來(lái)好復(fù)雜，只需要理解第二步，/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/；

對(duì)于這個(gè)正則，我們需要明白(?=.*[0-9])^這個(gè)；

分開(kāi)來(lái)看就是(?=.*[0-9]) 和 ^。

表示開(kāi)頭前面還有個(gè)位置（當(dāng)然也是開(kāi)頭，即同一個(gè)位置，想想之前的空字符類(lèi)比）。

(?=.*[0-9]) 表示該位置后面的字符匹配。

.*[0-9]，即，有任何多個(gè)任意字符，后面再跟個(gè)數(shù)字。

翻譯成大白話(huà)，就是接下來(lái)的字符，必須包含個(gè)數(shù)字。

5.3.4另外一種解法

“至少包含兩種字符”的意思就是說(shuō)，不能全部都是數(shù)字，也不能全部都是小寫(xiě)字母，也不能全部都是大寫(xiě)字母。

那么要求“不能全部都是數(shù)字”，怎么做呢？ (?!p) 出馬！

對(duì)應(yīng)的正則：

var regex = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

三種“都不能”呢？

最終答案是：

var regex = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
console.log( regex.test("1234567") ); 
// false 全是數(shù)字console.log( regex.test("abcdef") ); 
// false 全是小寫(xiě)字母console.log( regex.test("ABCDEFGH") ); 
// false 全是大寫(xiě)字母console.log( regex.test("ab23C") ); 
// false 不足6位console.log( regex.test("ABCDEF234") ); 
// true 大寫(xiě)字母和數(shù)字console.log( regex.test("abcdEF234") ); 
// true 三者都有

可視化形式：

RegExp：/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;

上述就是小編為大家分享的怎么在javascript中使用正則表達(dá)式實(shí)現(xiàn)位置匹配了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。