JavaScript中正則表示式的實際應用詳解

阿新 • • 發佈：2021-05-07

實際工作中，javascript正則表示式還是經常用到的。所以這部分的知識是非常重要的。

一、基礎語法：

第一種：字面量語法

var expression=/pattern/flags;

第二種：RegExp建構函式語法

var pattern = /\w/gi;  //字面量語法
var pattern = new RegExp('\\w','gi');//建構函式語法，這兩者是等價的

這裡有個注意點就是：如果正則表示式是動態的話，只能選擇第二種。

其中的flags有3個標誌

g：表示全域性模式，即模式將被應用於所有字串，而非在發現第一個匹配項時立即停止；

i：表示不區分大小寫模式，即在確定匹配項時忽略模式與字串的大小寫；

m：表示多行模式，即在到達一行文字末尾時還會繼續查詢下一行中是否存在與模式匹配的項。

當然還有其他的flags，用到的極少，不做過多闡述。

至於以上的\w什麼意思，稍等，請繼續往下看。

二、方法

主要有test()，search()，match()，replace()。當然還有其它的很多方法，不作闡述，畢竟用到的很少。

1、test()方法的使用

判斷某個字串中是否含有相應的字串

2、search()方法的使用

搜尋相應的字串第一次出現的索引位置，如果未找到，則返回-1

3、match()方法的使用

返回匹配的陣列

4、replace()方法的使用，這個用到的還是非常多的

匹配相應的字串，然後將其替換成其他字串

三、匹配表示式跟實戰

1、斷言：

所謂的斷言呢，就是表示一個匹配在某些條件下發生。總之呢，概念有點繞，直接看下文。待我慢慢續來。

字元	描述
^	匹配開頭
$	匹配結尾
\b	匹配單詞的邊界
\B	匹配非單詞的邊界

舉個例子

我要匹配一個字串，開頭到結尾是dog，忽略大小寫

var pattern = /^dog$/i;//忽略大小寫

console.log(pattern.test('do程式設計客棧g'));//true
console.log(pattern.test('sdfdog'));//false
console.log(pattern.test('dog56'));//false
console.log(pattern.test('dOG'));//true

var pattern = /\b\w+/g;//全域性匹配，這裡的+，是量詞，代表1次或者多次

console.log('Hello World'.match(pattern));//輸出['Hello','World']，這裡就是m程式設計客棧atch用法，返回匹配的陣列。

在這裡，說下，\b是匹配單詞的邊界，那麼\B是匹配非單詞的邊界。一個小寫，一個大寫XxCNjqz，大寫是反義。那麼不必我多說了吧。

再說下單詞邊界，可能很多人都不太清楚單詞邊界

我稍微解釋下啊，比如說，Hello World單詞邊界有四個，分別是H位置，o位置，W位置，d位置

2、字元類：

元字元	描述
.	查詢單個字元，除了換行和行結束符
\w	查詢單詞字元，相當於[Ahttp://www.cppcns.com-Za-z0-9_]
\W	查詢非單詞字元，相當於[^A-Za-z0-9_]
下面的反義便不再羅列出來了。
\d	查詢數字，相當於[0-9]
\s	查詢空白字元
\0	查詢NULL字元
\n	查詢換行符
\f	查詢換頁符
\r	查找回車符
\t	查詢製表符
\v	查詢垂直製表符

3、範圍：

字元	描述
[abc]	匹配a,b,c中的任意一個字元
[^abc]	匹配不是a,c中的任意一個字元
[0-9]	匹配0-9任意範圍的數字，同理[a-z]匹配a-z任意範圍的字元
[a-z]	匹配a到z之間的任意一個字元
x\|y	匹配x或者y

4、量詞：

字元	描述
n+	匹配任何包含至少一個字元n的字串
n*	匹配任何包含零個或多個n的字串
n?	匹配任何包含零個或者一個n的字串
n{x}	匹配包含x個n的字串
n{x,y}	匹配最少x個，最多y個n的字串

四、拓展

匹配10-36之間的數字

var pattern = /1[2-9]|[2-3][0-9]|4[0-6]/;//12-46

console.log(pattern.test(11));//false
console.log(pattern.test(12));//true
console.log(pattern.test(20));//true
console.log(pattern.test(36));//true
console.log(pattern.test(46));//true
console.log(pattern.test(47));//false

將'Hello,World!Hello'中的Hello替換成Welcome

這裡主要是強調一下replace方法在正則中的使用，因為這個在實際中用到的還是非常多的。後面的flags中的g，加上跟不加上有著很大的區別的。

var pattern = /Hello/g;

var oldString = 'Hello,World!Hello';
var newString = oldString.replace(pattern,'Welcome');
console.log(newString);//Welcome,World!Welcome