正則表達式是用來描述字符模式的對象挣输。它被用來在文本中執(zhí)行模式匹配(pattern-matching)以及”查找-替換”(search-and-replace)的任務齐饮。
前端開發(fā)中捐寥，我們常常會在這些地方看到正則：
- 驗證手機號，郵件祖驱，身份證號等是否合法握恳。
- 刪除字符串前后多余的空格。
- 從瀏覽器的UserAgent信息中提取出當前是什么瀏覽器捺僻，以及瀏覽器的版本乡洼。來做一些兼容性處理。
正則表達式給人的感覺：很難讀懂匕坯，也難寫束昵。誰知道下面2個正則是干嘛的嗎??
/<\/?[a-zA-Z]+(\s+[a-zA-Z]+=".*")*>/g/^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/ /^[a-zA-Z][a-zA-Z0-9_]{2,6}$/
為什么要學習正則？
正則表達式用簡短的代碼葛峻，能實現(xiàn)非常復雜的文本查找替換操作锹雏。用字符串的api來實現(xiàn)同樣的功能，代碼會復雜的多术奖，代碼量也會多的多礁遵。比如，驗證手機號是否合法采记。我們假定佣耐，合法的手機號指：以1開頭的11位數(shù)字。
用字符串的api挺庞，這么寫：
function validPhone(phone) {
let isValid = false
phone += ''
if (phone.length === 11 && phone[0] === '1' && !isNaN(phone)) {
isValid = true
}
return isValid
}
用正則晰赞，一行代碼搞定：
/^1\d{10}$/.test(phone)
可見稼病，熟練掌握正則表達式选侨，能極大的提升開發(fā)文本的查找替換功能的開發(fā)效率掖鱼。
例子
學習正則表達式的最好方法是從例子開始，理解例子之后再自己對例子進行修改援制。下面戏挡，我們就開始吧~
例子1: 精確匹配
查找文本中是否包含cat。代碼實現(xiàn)如下:
/cat/.test('I have a cat.') // 返回true
/cat/.test('I have a dog.') // 返回 false
上面的代碼中晨仑，/cat/ 創(chuàng)建了一個匹配 cat 的正則褐墅。有兩種方式創(chuàng)建正則對象：
-
/匹配模式/。 如/cat/洪己。 -
new RegExp(匹配模式字符串)妥凳。 如new RegExp('cat')。
這兩種方式的不同點在于答捕，方式2支持傳入變量逝钥。
test 是正則對象上的方法，用來檢索字符串中是否包含指定的值拱镐。返回 true 或 false艘款。還有一個常見的正則方法 exec，用來檢索字符串中指定的值沃琅。
字符串的split哗咆，search，replace益眉，match方法支持傳入正則晌柬。
例子2: 匹配一類字符：數(shù)字，字母呜叫，空格等
查找文本是否有數(shù)字空繁。代碼實現(xiàn)如下
/\d/.test('3C') // true
常見字符類型的匹配方式如下：
-
.: 匹配一個任意字符。 -
\d: 匹配一個數(shù)字朱庆。 -
\D: 匹配一個非數(shù)字字符盛泡。 -
[a-z]: 匹配一個小寫字母。 -
[A-Z]: 匹配一個大寫字母娱颊。 -
[\u4e00-\u9fa5]: 匹配一個中文字傲诵。 -
\w: 匹配字母、數(shù)字箱硕、下劃線拴竹。等價于[A-Za-z0-9_]。 -
\s: 匹配任何空白字符剧罩，包括空格栓拜、制表符、換頁符等等。 -
\S: 匹配任何非空白字符幕与。 -
\\: 匹配\挑势。
例子3: 匹配指定范圍內(nèi)字符
查找文本中是否包含 ab12 中任意一個字符。代碼實現(xiàn)如下:
/[ab12]/.test('a') // true
/[ab12]/.test('b') // true
/[ab12]/.test('1') // true
/[ab12]/.test('2') // true
用 [指定范圍] 來匹配指定范圍內(nèi)字符啦鸣。 用 [^指定范圍] 來匹配不在指定范圍內(nèi)的字符潮饱。如：/[^a-z]/ 匹配非小寫字母。
例子4: 匹配重復
查找文本中是否包含5個a诫给。蠻干版香拉，代碼實現(xiàn)如下:
/aaaaa/.test('aaaaa') // true
優(yōu)雅版:
/a{5}/.test('aaaaa') // true
查找文本中是否包含3個ab。代碼實現(xiàn)如下:
/(ab){3}/.test('ababab') // true
注意中狂，上面的代碼中凫碌，用括號包起來ab，把ab變成一個整體胃榕。不加括號证鸥，匹配的是abbb。
重復字符的匹配方式如下：
- *: 匹配前面的子表達式零次或多次勤晚。
- +: 匹配前面的子表達式一次或多次枉层。
- ?: 匹配前面的子表達式零次或一次。
- {n}: 匹配前面的子表達式確定的 n 次赐写。
- {n,}: 匹配前面的子表達式至少 n 次鸟蜡。
- {n,m}: 匹配前面的子表達式 n 到 m之間。
更多例子：
/a\*/ // 匹配任意個a
/https?/ // 匹配 http 和 https
/1\d{10}/ // 11位手機號
例子5: 匹配文本以...開始和以...結尾
查找文本是否以字母開頭挺邀，以數(shù)字結尾揉忘。代碼實現(xiàn)如下:
/^[a-zA-Z].*\d$/.test('ab1') // true
^用來匹配輸入字符串的開始位置。$用來匹配輸入字符串的結束位置端铛。
例子6: 匹配多種情況
查找文本是包含138或包含159泣矛。代碼實現(xiàn)如下:
/(138|159)/.test('138') // true
/(138|159)/.test('159') // true
|用來匹配多種情況。注意禾蚕，情況包含的字符數(shù)量超過一個您朽，要用括號包起來。反例：
/138|159/.test('138') // false
/138|159/.test('13859') // true
/138|159/.test('13159') // true
例子7: 匹配模式
查找文本中是否全部是字母换淆。實現(xiàn)方法1:
/^[a-zA-Z]*$/.test('abcABC') // true
方法2:
/^[a-z]*$/i.test('abcABC') // true
方法2中的i是匹配模式哗总。常見的匹配模式如下：
- g : 執(zhí)行全局匹配（查找所有匹配而非在找到第一個匹配后停止）
- i : 執(zhí)行對大小寫不敏感的匹配。
- m : 執(zhí)行多行匹配倍试。
一個正則可以有多個模式讯屈，表示對多個模式的疊加。如 /a/ig县习。
例子8: 匹配的爭奪：貪婪模式和非貪婪模式
匹配文本中的非空白字符和數(shù)字涮母，要盡量多匹配數(shù)字谆趾。代碼實現(xiàn)如下:
/(\S+?)(\d*)/.exec('a123') // ["a123", "a", "123"]
// 這種寫法，會盡可能多的匹配非空白字符：/(\S+)(\d*)/.exec('a123') // ["a123", "a123", ""]
當正則表達式中包重復的限定符(*+,?, {n}, {n,}, {n,m})時叛本，匹配模式是貪婪的：匹配盡可能多的字符棺妓。在重復的限定符后加?，會將匹配模式改成非貪婪的：匹配盡可能少的字符炮赦。
例子9: 文本替換
將文本中單詞"cat"替換成"dog"。代碼實現(xiàn)如下:
'I have a cat.'.replace(/cat/, 'dog') // 運行結果 I have a dog.
將文本中所有的單詞"cat"替換成"dog"样勃。代碼實現(xiàn)如下:
'cat,cat,cat'.replace(/cat/g, 'dog') // 運行結果 dog,dog,dog
將第2個出現(xiàn)的"cat"替換成"dog"吠勘。代碼實現(xiàn)如下:
let appearNum = 0
let res = 'cat,cat,cat'.replace(/cat/g, (matched) => {
appearNum++
if(appearNum === 2) {
return 'dog'
} else {
return matched
}
})
console.log(res) // 運行結果 cat,dog,cat
推薦工具
RegExr
正則測試工具。
Regulex
JavaScript 正則可視化工具峡眶。展示效果:
總結
熟練掌握正則表達式剧防，能極大的提升開發(fā)文本的查找替換功能的開發(fā)效率。大家有必要去認真學一下辫樱。
本文介紹了正則的基礎峭拘。正則博大精深，還有很多值得研究狮暑。
