詳解JavaScript中的正則表達式
- 2021 年 5 月 4 日
- 筆記
- javascript
實際工作中，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('dog'));//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']，這裡就是match用法，返回匹配的數組。
在這裡，說下，\b是匹配單詞的邊界，那麼\B是匹配非單詞的邊界。一個小寫，一個大寫，大寫是反義。那麼不必我多說了吧。
再說下單詞邊界，可能很多人都不太清楚單詞邊界
我稍微解釋下啊
，比如說，Hello World單詞邊界有四個，分別是H位置，o位置，W位置，d位置
2、字符類：
| 元字符 | 描述 |
|---|---|
| . | 查找單個字符，除了換行和行結束符 |
| \w | 查找單詞字符，相當於[A-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,b,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
