前言
作為前端在日常開發過程中少不了會遇到各種需用用到 正規表示式 的時候，正規表示式 其實不難，搜索引擎一搜就出來了，但是有時候業務比較奇怪，那麼就需要自己來改造一下，所以熟悉一下正規表示式的用法，能夠看懂，能夠修改 應該是前端開發必備的技能之一。
什麼是正規表示式？
正規表示式（Regular Expressions，簡稱regex）是處理字串的強大工具。它可以用來搜尋、匹配和替換字串中的特定模式。在JavaScript中，正規表示式非常常用。本篇文章將帶你從基礎開始，逐步瞭解並掌握JavaScript中的正規表示式。
正規表示式是一種用於描述字串模式的特殊語法。它可以用於多種文字處理任務，如驗證表單輸入、查詢和替換文字等。
建立正規表示式
在JavaScript中，可以透過兩種方式建立正規表示式：
字面量方式：
const regex = /pattern/flags;
建構函式方式:
const regex = new RegExp('pattern', 'flags');
常用函式
test方法用於測試一個字串是否匹配某個模式。
const regex = /hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world")); // false
match方法用於在一個字串中查詢所有匹配的模式。
const regex = /o/g; const str = "hello world"; console.log(str.match(regex)); // ["o", "o"]
replace方法用於替換匹配的子字串。
const regex = /world/; const str = "hello world"; const newStr = str.replace(regex, "JavaScript"); console.log(newStr); // "hello JavaScript"
split方法用於將字串分割成陣列。
const regex = /\s/; const str = "hello world"; const arr = str.split(regex); console.log(arr); // ["hello", "world"]
常用標誌（flags）
g：全域性搜尋（global search），匹配所有可能的結果。i：忽略大小寫（case-insensitive search）。m：多行模式（multi-line search），將字串視為多行。
簡單匹配
匹配一個具體的字串：
const regex = /hello/; const str = "hello world"; console.log(regex.test(str)); // true
忽略大小寫匹配
/i
const regex = /hello/i; const str = "Hello World"; console.log(regex.test(str)); // true
全域性匹配
/g
const regex = /o/g; const str = "hello world"; console.log(str.match(regex)); // ["o", "o"]
使用元字元
.：匹配除換行符外的任意字元。
const regex = /h.llo/;
console.log(regex.test("hello")); // true
\d：匹配一個數字（0-9）。
const regex = /\d/;
console.log(regex.test("abc123")); // true
\w：匹配一個字母、數字或下劃線。
const regex = /\w/;
console.log(regex.test("hello_world")); // true
\s：匹配一個空白字元（空格、製表符等）。
const regex = /\s/;
console.log(regex.test("hello world")); // true
使用錨點
錨點用於指定匹配的開始和結束位置：
^：匹配字串的開始。
const regex = /^hello/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false
$：匹配字串的結束。
const regex = /world$/;
console.log(regex.test("hello world")); // true
console.log(regex.test("world hello")); // false
使用量詞
*：匹配前面的字元0次或多次。
const regex = /ho*/;
console.log(regex.test("hooo")); // true
console.log(regex.test("h")); // true
+：匹配前面的字元1次或多次。
const regex = /ho+/;
console.log(regex.test("hooo")); // true
console.log(regex.test("h")); // false
?：匹配前面的字元0次或1次。
const regex = /ho?/;
console.log(regex.test("ho")); // true
console.log(regex.test("h")); // true
{n}：匹配前面的字元n次。
const regex = /ho{2}/;
console.log(regex.test("hoo")); // true
console.log(regex.test("hooo")); // false
{n,}：匹配前面的字元至少n次。
const regex = /ho{2,}/;
console.log(regex.test("hoo")); // true
console.log(regex.test("hooo")); // true
{n,m}：匹配前面的字元n到m次。
const regex = /ho{2,3}/;
console.log(regex.test("hoo")); // true
console.log(regex.test("hooo")); // true
console.log(regex.test("hoooo")); // false
使用字符集
[]：匹配括號內的任意一個字元。
const regex = /h[aeiou]llo/;
console.log(regex.test("hello")); // true
console.log(regex.test("hollo")); // false
[^]：匹配不在括號內的任意字元。
const regex = /h[^aeiou]llo/;
console.log(regex.test("hallo")); // false
console.log(regex.test("hpllo")); // true
使用分組與反向引用
()：分組，用於捕獲子字串。
const regex = /(hello) (world)/; const str = "hello world"; const result = str.match(regex); console.log(result[0]); // "hello world" console.log(result[1]); // "hello" console.log(result[2]); // "world"
\n：反向引用，用於引用前面的分組。
const regex = /(hello) \1/;
console.log(regex.test("hello hello")); // true
高階用法零寬斷言
先行斷言（Positive Lookahead）：匹配某個字元序列前面的字元。
const regex = /hello(?= world)/;
console.log(regex.test("hello world")); // true
console.log(regex.test("hello there")); // false
先行否定斷言（Negative Lookahead）：匹配某個字元序列前面不出現的字元。
const regex = /hello(?! world)/;
console.log(regex.test("hello world")); // false
console.log(regex.test("hello there")); // true
後行斷言（Positive Lookbehind）：匹配某個字元序列後面的字元。
const regex = /(?<=hello )world/;
console.log(regex.test("hello world")); // true
console.log(regex.test("hi world")); // false
後行否定斷言（Negative Lookbehind）：匹配某個字元序列後面不出現的字元。
const regex = /(?<!hello )world/;
console.log(regex.test("hello world")); // false
console.log(regex.test("hi world")); // true
正規表示式的實際應用
驗證電子郵件地址
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
console.log(emailRegex.test("test@example.com")); // true
console.log(emailRegex.test("invalid-email")); // false
驗證電話號碼
const telRegex = /^\d{3}-\d{3}-\d{4}$/;
console.log(telRegex.test("123-456-7890")); // true
console.log(telRegex.test("123-45-6789")); // false
驗證手機號碼
const phoneRegex = /^1[0-9]{10}$/;
console.log(phoneRegex.test("15202389657")); // true
console.log(phoneRegex.test("25202389657")); // false
提取網頁URL中的域名
const url = "https://www.example.com/path?name=test"; const domainRegex = /^(?:https?:\/\/)?(?:www\.)?([^\/]+)/; const match = url.match(domainRegex); console.log(match[1]); // "example.com"
總結 :本文介紹了JavaScript正規表示式的基礎知識和常用操作。透過學習這些內容，你可以輕鬆處理各種字串操作。正規表示式是一個非常強大的工具，掌握它將極大地提升你的程式設計效率。
