史上最全面的正則表達式系列學習筆記--基礎篇1

史上最全面的正則表達式系列學習筆記(基礎篇1)

hellow你們好，在上期的正則火星文的課程中，咱們着重向你們介紹了正則表達式的一些基礎常識和概念。瞭解了RegExp對象的構造方法和以及基本屬性和方法。可是對於正則表達式的規則只是簡單的說起了修飾符(g/i/m)的基本含義。

本期咱們將開始細緻的向你們介紹正則表達式的基本規則。

匹配規則

首先咱們應該瞭解，正則表達式是由兩種基本字符串組成：原義文本字符和元字符。

原義文本字符(literal characters)

也被稱做字面量字符，簡單的理解就是正則表達式的一個字符對應字符串的一個字符，好比說下面這個例子 /hellow/表示的就是匹配字符串中hellow的文本。

元字符(metacharacters)

具備特殊含義的字符，不表明自己字面意思。

好比咱們常常見到的這些轉義字符

字符	描述
\n	匹配換行鍵
\r	匹配回車鍵
\t	匹配製表符 tab（U+0009）
\v	匹配垂直製表符（U+000B）
\f	匹配換頁符（U+000C）
\0	匹配null字符（U+0000）
[\b]	匹配退格鍵(U+0008)，不要與\b混淆。
\cX	匹配Ctrl-[X]，其中的X是A-Z之中任一個英文字母，用來匹配控制字符
\xhh	匹配一個以兩位十六進制數（\x00-\xFF）表示的字符
\uhhhh	匹配一個以四位十六進制數（\u0000-\uFFFF）表示的 Unicode 字符

除此以外正則表達式還有如下這些有特殊意義的字符 * + ? & ^ . | \ () [] {}

接下來咱們一一爲你們講解

字符類 []

以前咱們有學習了最基本的原義字符匹配，好比

var str = 'hellow123'.replace(/1/g,'!')
console.log(str) //hellow!23
複製代碼

若是咱們想把123都換成!,顯然直接寫/123/g是不行的。

[]就是作這個用的，字符類（class）表示有一系列字符可供選擇，只要匹配其中一個就能夠了。全部可供選擇的字符都放在方括號內。 上面的例子就能夠寫成：

var str = 'hellow123'.replace(/[123]/g,'!')
console.log(str) //hellow!!!
複製代碼

來看一下過程圖解

字符類取反 ^

仍是上面的例子，咱們給寫長一點hellow1234567890,若是想把除了123以外的全部字符都變成!該怎麼辦呢，固然咱們能夠運用上面的方法把全部要變的都列出來，可是太長了。

^就是作這個用的,字符類取反(脫字符):若是方括號內的第一個字符是[^]，則表示除了字符類之中的字符，其餘字符均可以匹配。

上面能夠寫成

var str = 'hellow1234567890'.replace(/[^123]/g,'!')
console.log(str)//!!!!!!123!!!!!!!
複製代碼

來看一下過程圖解

範圍類 -

假設咱們如今有這樣一個需求要把hellow1234567890全部的數字變成!，該怎麼辦呢?固然能夠寫成[1234567890],那要是全部字母呢，豈不是要把全部字母列一遍？

-就是作這個用的,某些狀況下，對於連續序列的字符，-用來提供簡寫形式，表示字符的連續範圍。好比，[abc]能夠寫成[a-c]，[0123456789]能夠寫成[0-9]，同理[A-Z]表示26個大寫字母。

上面能夠寫成

var str = 'hellow1234567890'.replace(/[0-9]/g,'!')
console.log(str)//hellow!!!!!!!!!!
複製代碼

來看一下過程圖解

舉幾個例子

正則	描述
[a-zA-Z]	匹配全部字母包含大小寫
[0,3]	匹配數字0，1，2，3
[\u0128-\uFFFF]	匹配unicode
[1-59]	不表明1到59，只表明1到5
[0-9-]	匹配區間0-9和-
[A-z]	注意ASCII編碼之中，大寫字母與小寫字母之間還有其餘字符

預約義類 \

一般在咱們的平常用語中描述一類東西，並不會把他裏面的每一項都列舉出來，而是給以統稱，這樣比較方便。好比咱們會說，我想把這個字符串中的全部數字換成感嘆號，而不會去說我想把這個字符串中的0到9換成感嘆號。

\就是作這個用的,預約義類：正則表達式給咱們預約義了一些簡寫的方式

正則	描述	等價	記憶方式
\d	數字字符	[0-9]	digit
\D	非數字字符	[^0-9]
\s	空白符	[\t\n\x0B\f\r]	space
\S	非空白符	[^\t\n\x0B\f\r]
\w	單詞字符（字母、數字、下劃線）	[a-zA-Z_0-9]	word
\W	非單詞字符	[^a-zA-Z_0-9]
.	除了回車符、換行符、字符行分隔符、段分隔符之外的全部字符	[^\n\r\u2028\u2029]	……

使用一下

var str = 'hellow-1234567890'.replace(/\d/g,'!')
console.log(str)//hellow-!!!!!!!!!!
複製代碼

若是要匹配任意字符怎麼辦?能夠使用 [\d\D]、[\w\W]、[\s\S] 和 [^] 中任何的一個。

來看一下過程圖解(匹配全部)

位置邊界^ $ \b \B

迴歸到現實的需求，咱們已經只加上修飾符g就會進行全局匹配，不加只會匹配第一個，那麼咱們要想匹配特定位置規則的字符該這怎麼辦呢？好比這個@qq@163@foxmail，咱們想知道這個字符串是否是以@開始的。

正則表達式也給咱們提供了基於位置的匹配規則

正則	描述
^	以xx開頭
$	以xx結尾
\b	單詞邊界，指[a-zA-Z_0-9]以外的字符
\B	非單詞邊界

寫一下

var str = /^@/g.test('@qq@163@foxmail')
console.log(str)//true

var str = /@$/g.test('@qq@163@foxmail')
console.log(str)//false

var str = 'hellow word12-3545'.replace(/\b/gm,'!')
console.log(str)//!hellow! !word12!-!3545!

var str = 'hellow word12-3545'.replace(/\B/gm,'!')
console.log(str)//h!e!l!l!o!w w!o!r!d!1!2-3!5!4!5
複製代碼

來看一下圖解(單詞邊界)

這裏咱們再提一下和修飾符m的搭配使用

var s =  `@qq @163 @foxmail`;
var str = s.replace(/^@/g,'!')
console.log(str)
//!qq
@163
@foxmail


var str1 = s.replace(/^@/gm,'!')
console.log(str1)
//!qq
!163
!foxmail
複製代碼

今天的正則火星文基礎篇先講到這裏， 給你們留個做業，試着用已經掌握的知識，解決下面的問題

• 只能輸入字母數字下劃線
• 不能輸入特殊字符
• 校驗訂單金額是不是數字(包含小數 )
• 校驗手機號碼是否符合規則

在下一期中會給你們繼續介紹JavaScript中正則表達式基礎篇的相關內容。敬請期待！若是你有什麼好的建議歡迎留言給咱們。