1. 程式人生 > >詳解JavaScript正則表示式(一)

詳解JavaScript正則表示式(一)

RegExp 物件表示正則表示式,它是對字串執行模式匹配的強大工具

這篇文章主要是對正則表示式有一個全面的瞭解,學完之後,當再次看到一些比較複雜的正則表示式的時候就可以逐步分析了。當然,再加上一段時間的練習,相信你自己也可以學會怎麼使用正則表示式的。

1、例項化正則表示式的兩種方法。

a.字面量形式

先看一個簡單的例子。

var reg = /\d{3}/

這張圖片是通過一個正則表示式的線上測試網站上得到的。測試網站是https://regexper.com/

可以看到上面這個簡單的例子描述的是匹配一個三位數字組成的字串。看下面這個例子,來試著用一個字串匹配一些這個正則表示式。

var str = "123abc";
var reg = /\d{3}/;
var res = str.replace(reg,"D");
console.log(res);

上面這個例子是匹配三個數字,然後替換成一個字母“D”,
輸出結果是Dabc。至於replace這個方法後文中會講到,這裡只是讓大家對正則表示式有一個大致上的瞭解。

b.使用建構函式方式

var reg = new RegExp("\\d{3}");

看上面的是和上面的字面量形式一樣的,注意這裡是使用了兩個“//”,後面的一個”/d”是組成一個正則表示式中的預定義類,用於匹配一個數字,前面的一個”/”是為了對”/”進行轉義,否則不能識別出這個特殊字元。這一點格外注意。

上文只是讓你對正則表示式有一個整體上的瞭解,接下來就是對正則表示式的每個部分進行詳細的分析。

2、元字元

正則表示式中有兩種基本型別的字元組成:
1、 原義文字字元,如abc就是表示abc的意思
2、 元字元。是指在正則表示式中有特殊含義的非字母字元
有 . * + ? $ ^ | \ ( ) { } [ ]
這裡寫圖片描述

1.字元類

可以使用字元” [ ]“來構建一個簡單的類。
所謂類是指某些符合某些特性的物件,一個泛指,而不是特指某個字元

表示式[abc]表達的是把字元a,b,c歸為一類,表示式可以匹配這類字元。

這裡寫圖片描述

來看一個簡單的例子。


var str = "abcdef"
; var reg = /[abc]/g; var res = str.replace(reg,"X"); console.log(res);

分析:上面程式碼中[abc]表示的是可以匹配a,或者b,或者c。
因此上面的輸出結果是XXXdef。注意/[abc]/g中g表示的是一個全域性修飾符,後面會有詳細解釋,這裡先理解一下就是匹配字串str中每一個是a或者b或者c的字元,然後替換成”X“。

2.字元類取反

使用元字元”^“建立反向類。意思是不屬於某類的內容。例如表示式[^abc] 表示不是a或者b或者c的內容

在看一個簡單的例子:

var str = "abcdef";
var reg = /[^abc]/g;
var res = str.replace(reg,"X");
console.log(res);

上面程式碼的輸出結果是:abcXXX,可以看出def匹配成功。

3.範圍類

比如可以使用[a-z]表示a到z之間的任意字元。這是一個閉區間,包含a和z本身。
舉個例子:

var str = "ABCD999abcd";
var reg = /[a-zA-Z]/g;
var res = str.replace(reg,"Q");
console.log(res);

輸出結果:”QQQQ999QQQQ”
上面的reg正則是用來匹配26的英文字母,不論大小寫的。

4.預定義類

正則表示式中提供一些預定義類來匹配字串。
|   字元  |等價類|含義
因此在一些特殊的需求的時候,就可以很方便的使用這些預定義的類。

5.邊界


看一個例子:

var str = "This is a book";
var reg = /\bis\b/g;
var res = str.replace(reg,"IS");
console.log(res);

var reg2 = /is/g;
var res2 = str.replace(reg2,"IS");
console.log(res2);

輸出結果:
“This IS a book”
“ThIS IS a book”
仔細比較上面兩個輸出中的This。第二個中的ThIS是因為替換的時候,因為沒有單詞邊界\b,所以/is/也會匹配到This中的is,然後進行替換。而\bis\b加上單詞邊界之後,只會替換單個單詞is,而This裡面的is不會給替換。

6.量詞

這裡寫圖片描述
舉一個例子看看:
\d{3,5}所表示的意思就是下圖所示,表示3到5個數字,也就是可以匹配3個、4個或者5個數字。
這裡寫圖片描述

這裡講解的是JavaScript正則表示式中第一階段的,後續還有文章會接著講解一些其他一些高階用法。