正則表達(dá)式在JavaScript中是一種強大的模式匹配工具，通過使用/pattern/語法定義匹配規(guī)則，並可結(jié)合.test()或.match()方法進(jìn)行驗證或提取信息。例如，/hello/用於匹配字符串中的“hello”，而添加i標(biāo)誌如/hello/i則實現(xiàn)不區(qū)分大小寫的匹配。特殊字符如.、*、 等需用反斜杠轉(zhuǎn)義以匹配字面值，同時可使用\d（數(shù)字）、\w（單詞字符）、\s（空白）等快捷符號。標(biāo)誌符g（全局搜索）、i（忽略大小寫）、m（多行模式）可增強匹配靈活性。通過括號()可分組並捕獲匹配內(nèi)容，如從電子郵件中提取用戶名和域名，且替換操作可通過$1、$2等引用捕獲組實現(xiàn)動態(tài)替換，如將日期格式Y(jié)YYY-MM-DD轉(zhuǎn)換為MM/DD/YYYY。使用時應(yīng)仔細(xì)測試以確保準(zhǔn)確性。

If you're trying to get a solid grip on regular expressions in JavaScript, you're not alone. RegEx can feel like black magic at first — cryptic symbols that somehow match complex patterns. But once you understand how the pieces fit together, it becomes one of the most powerful tools in your JS toolkit. This isn't about memorizing every flag or escape sequence; it's about knowing how to apply them when you need to.

Matching basic patterns with /pattern/

At its core, a regular expression is just a pattern wrapped in slashes: /hello/ will look for the exact word "hello" in a string. This is case-sensitive by default, so "Hello" won't match unless you add the i flag: /hello/i .

You'll often use this inside .test() or .match() methods:

 /hello/.test("hello world"); // true
"hello world".match(/hello/); // ["hello"]

Some characters have special meaning — like . , * , , ? , $ , and ^ . If you want to match them literally, you need to escape them with a backslash: /\.com$/ checks if a string ends with ".com".

A few common shortcuts:

• \d matches any digit
• \w matches word characters (letters, digits, underscores)
• \s matches whitespace

And their opposites:

• \D = non-digit
• \W = non-word character
• \S = non-whitespace

Using flags for more flexibility

Flags modify how your regex behaves. The most commonly used ones are:

• g (global): keeps searching after the first match
• i (case-insensitive): ignores uppercase/lowercase differences
• m (multiline): changes how ^ and $ behave (more on that later)

For example, without g , .match() returns only the first match. With it, you get all:

 "a1b2c3".match(/\d/); // ["1"]
"a1b2c3".match(/\d/g); // ["1", "2", "3"]

The i flag helps when user input might vary in case:

 /youtube/i.test("YouTube"); // true

Multiline mode ( m ) is useful when working with line-based content like logs or code blocks. Normally, ^ and $ match the start and end of the entire string. In multiline mode, they match the start/end of each line.

Capturing and grouping with parentheses

Parentheses () let you group parts of a pattern and capture what they match. This comes in handy when extracting specific parts of a string.

Take an example where we want to extract the username and domain from an email:

 const str = "user@example.com";
const match = str.match(/^(\w )@([\w\.] )$/);

console.log(match[1]); // "user"
console.log(match[2]); // "example.com"

Here, the parentheses define two groups:

1. One before the @
2. One after

Note that match returns an array where index 0 is the full match, and subsequent indexes correspond to captured groups.

If you don't need to capture, but still want to group (eg, for repeating a pattern), use (?:...) instead:

 /(abc) / // captures "abc" as a group
/(?:abc) / // matches "abcabc", but doesn't store the group

Replacing text dynamically with $1 , $2 , etc.

One of the most practical uses of regex is replacing parts of strings. You can do static replacements easily with .replace() , but combining it with regex lets you do dynamic swaps using captured groups.

Let's say you want to convert date formats from YYYY-MM-DD to MM/DD/YYYY :

 const dateStr = "2024-05-15";
const newDate = dateStr.replace(/^(\d{4})-(\d{2})-(\d{2})$/, "$2/$3/$1");
// Result: "05/15/2024"

In the replacement string:

• $1 refers to the first captured group (year)
• $2 refers to the second (month)
• $3 refers to the third (day)

This works even with multiple matches if you use the global flag:

 "img1.jpg img2.png".replace(/(\w )\.(jpg|png)/g, "thumb_$1.$2");
// Result: "thumb_img1.jpg thumb_img2.png"

Just remember: always test your regex carefully, especially when dealing with user-generated data. A small mistake can lead to unexpected matches or missed cases.

基本上就這些。

以上是實用的JS綜述，用於掌握正則表達(dá)式（REGEX）的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！