Javascript 字符類

考慮一個(gè)實(shí)際的任務(wù) —— 我們有一個(gè)電話號碼，例如 ?"+7(903)-123-45-67"?，我們需要將其轉(zhuǎn)換為純數(shù)字：?79031234567?。

為此，我們可以查找并刪除所有非數(shù)字的內(nèi)容。字符類可以幫助我們實(shí)現(xiàn)它。

字符類（Character classes） 是一種特殊的符號，匹配特定集合中的任何符號。

首先，讓我們探索“數(shù)字”類。它寫為 \d，對應(yīng)于“任何一位數(shù)字”。

例如，讓我們找到電話號碼的第一個(gè)數(shù)字：

let str = "+7(903)-123-45-67";

let regexp = /\d/;

alert( str.match(regexp) ); // 7

如果沒有修飾符 g，則正則表達(dá)式僅查找第一個(gè)匹配項(xiàng)，即第一個(gè)數(shù)字 \d。

讓我們添加修飾符 g 來查找所有數(shù)字：

let str = "+7(903)-123-45-67";

let regexp = /\d/g;

alert( str.match(regexp) ); // 匹配項(xiàng)構(gòu)成的數(shù)組：7,9,0,3,1,2,3,4,5,6,7

// 讓我們將其輸出為純數(shù)字構(gòu)成的電話號碼：
alert( str.match(regexp).join('') ); // 79031234567

這是數(shù)字的字符類。還有其他字符類。

最常用的是：

?\d?（“d” 來自 “digit”）

數(shù)字：從 ?0? 到 ?9? 的字符。

?\s?（“s” 來自 “space”）

空格符號：包括空格，制表符 ?\t?，換行符 ?\n? 和其他少數(shù)稀有字符，例如 ?\v?、?\f? 和 ?\r?。

?\w?（“w” 來自 “word”）

“單字”字符：拉丁字母或數(shù)字或下劃線 ?_?。非拉丁字母（如西里爾字母或印地文）不屬于 ?\w?。

例如，\d\s\w 表示“數(shù)字”，后跟“空格字符”，后跟“單字字符”，例如 1 a。

正則表達(dá)式可能同時(shí)包含常規(guī)符號和字符類。

例如，CSS\d 匹配 CSS 后面帶有一個(gè)數(shù)字的字符串：

let str = "Is there CSS4?";
let regexp = /CSS\d/

alert( str.match(regexp) ); // CSS4

我們還可以使用更多字符類：

alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5'

匹配項(xiàng)（每個(gè)正則表達(dá)式字符類都有對應(yīng)的結(jié)果字符）：

反向類

對于每個(gè)字符類，都有一個(gè)“反向類”，用相同的字母表示，但是大寫的。

“反向”表示它與所有其他字符匹配，例如：

?\D ?

非數(shù)字：除 ?\d? 以外的任何字符，例如字母。

?\S ?

非空格符號：除 ?\s? 以外的任何字符，例如字母。

?\W ?

非單字字符：除 ?\w? 以外的任何字符，例如非拉丁字母或空格。

在本章的開頭，我們看到了如何從 +7(903)-123-45-67 這樣的字符串中創(chuàng)建一個(gè)只包含數(shù)字的電話號碼：找到所有的數(shù)字并將它們連接起來。

let str = "+7(903)-123-45-67";

alert( str.match(/\d/g).join('') ); // 79031234567

另一種快捷的替代方式是查找非數(shù)字 \D 并將其從字符串中刪除：

let str = "+7(903)-123-45-67";

alert( str.replace(/\D/g, "") ); // 79031234567

點(diǎn)（.）匹配“任何字符”

點(diǎn) . 是一種特殊字符類，它與“除換行符之外的任何字符”匹配。

例如：

alert( "Z".match(/./) ); // Z

或在正則表達(dá)式中間：

let regexp = /CS.4/;

alert( "CSS4".match(regexp) ); // CSS4
alert( "CS-4".match(regexp) ); // CS-4
alert( "CS 4".match(regexp) ); // CS 4（空格也是一個(gè)字符）

請注意，點(diǎn)表示“任何字符”，而不是“缺少字符”。必須有一個(gè)與之匹配的字符：

alert( "CS4".match(/CS.4/) ); // null，沒有匹配項(xiàng)，因?yàn)檫@里沒有與點(diǎn)匹配的字符

帶有修飾符 “s” 時(shí)點(diǎn)字符類匹配任何字符

默認(rèn)情況下，點(diǎn)與換行符 \n 不匹配。

例如，正則表達(dá)式 A.B 匹配 A，然后匹配 B 和它們之間的任何字符，除了換行符\n：

alert( "A\nB".match(/A.B/) ); // null（無匹配項(xiàng)）

在很多情況下，我們希望點(diǎn)能夠匹配“任何字符”，包括換行符。

這就是修飾符 s 所做的事。如果有一個(gè)正則表達(dá)式具有該修飾符，那么點(diǎn) . 能夠匹配任何字符：

alert( "A\nB".match(/A.B/s) ); // A\nB（匹配了！）

IE 瀏覽器不支持

IE 瀏覽器不支持 s 修飾符。

幸運(yùn)的是，有一個(gè)替代方案，我們可以使用像 [\s\S] 這樣的正則表達(dá)式來匹配“任何字符”（此模式將在 集合和范圍 [...] 中介紹）。

alert( "A\nB".match(/A[\s\S]B/) ); // A\nB（匹配了?。?

模式 [\s\S] 從字面上意思是：“空格字符或非空格字符”。換句話說，“任何字符”。我們可以使用另一對互補(bǔ)的類，例如 [\d\D]。甚至是 [^] —— 意思是匹配任何字符，除了什么都沒有。

如果我們希望兩種“點(diǎn)”都使用相同的模式，也可以使用此技巧：實(shí)際的點(diǎn) . 表現(xiàn)常規(guī)方式（“不包括換行符”），以及帶有 [\s\S] 或類似形式匹配“任何字符”。

注意空格

通常我們很少注意空格。對我們來說，字符串 1-5 和 1 - 5 幾乎相同。

但是，如果正則表達(dá)式未考慮空格，則可能無法正常工作。

讓我們嘗試查找由連字符（-）分隔的數(shù)字：

alert( "1 - 5".match(/\d-\d/) ); // null，沒有匹配項(xiàng)！

讓我們修復(fù)一下，在正則表達(dá)式中添加空格 \d - \d：

alert( "1 - 5".match(/\d - \d/) ); // 1 - 5，現(xiàn)在可以了
// 或者我們可以使用 \s 類：
alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5，也可以

一個(gè)空格是一個(gè)字符。與其他字符同等重要。

我們無法在正則表達(dá)式中添加或刪除空格后，還期望它的作用能像之前那樣不被改變。

換句話說，在正則表達(dá)式中，所有字符都很重要，空格也很重要。

總結(jié)

存在以下字符類：

• \d —— 數(shù)字。
• \D —— 非數(shù)字。
• \s —— 空格符號，制表符，換行符。
• \S —— 除了 \s 。
• \w —— 拉丁字母，數(shù)字，下劃線 '_'。
• \W —— 除了 \w。
• . —— 帶有修飾符 's' 時(shí)匹配任何字符，否則匹配除換行符 \n 之外的任何字符。

……但這還不是全部！

JavaScript 用于字符串的 Unicode 編碼提供了很多字符屬性，例如：這個(gè)字母屬于哪種語言（如果它是一個(gè)字母），它是標(biāo)點(diǎn)符號嗎，等等。

我們也可以通過這些屬性進(jìn)行搜索。這需要修飾符 ?u?，我們將在下一篇文章中介紹。