前端計劃——JavaScript正則表達式快速入門

前言：正則表達式時處理字符串中經常使用的手法，本文以簡單的方式，快速展現了JavaScript中正則相關的基礎知識點。文末還提供了幾個簡單的正則相關面試題。我的總結，若有錯誤，還望指正，

JavaScript正則表達式快速入門

兩種新建語法

字面量法

var patt = /w+/i;

RegExp對象法

(1)var patt = new RegExp('/w+/i');

(2)var patt = new RegExp('w+','i');

其中第二個變量表示修飾符，在ES5中，(1)方法不容許加第二個變量，ES6中則容許，且後面的修飾符會覆蓋原修飾符。

五個修飾符

i：忽視大小寫
g：全局匹配
m：多行匹配
u：用於處理大於uFFFF的字符（ES6新增）
y：相似g，可是有粘連特色（ES6新增）

部分屬性

一、reg.sticky

用於檢測是否設置y修飾符，返回true/false（ES6新增）

二、reg.source

返回表達式正文（ES5）

三、reg.flags

返回修飾符（ES6新增）

量詞系列

基礎量詞

? (0或1)
* (0個及以上)
+ (1個及以上)

開頭結尾

^ 開頭
$ 結尾

指定量詞

{x} 指定數量
{x,} 大於X數量
{x,y} x,y之間

特殊

?=str 後面緊接str的

?!str 後面沒有緊接str的

語法系列

RegExp方法

一、compile方法

patt.compile(newPatt)

用於編譯正則，或者改變正則內容

二、exec方法

patt.exec(str)

若是找到了，返回相應的字符串，若是沒有，返回null

三、test方法

patt.test(str)

若是找到了，返回true，不然返回false

String方法

一、search()

str.search(patt)

若是找到了，返回起始位置，不然返回-1

二、match()

str.match(patt)

返回一個數組，沒有找到返回null

三、replace()

str.replace(patt, newValue)

替換指定的內容

四、split()

str.split('patt')

以指定內容分割爲數組

部分題目

題目一：正則校驗電子郵箱

var checkEmail = function(email) {
    var patt = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/i
    return patt.test(email);
}
//另外一種寫法
/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;

題目二： 爲string添加去除先後空白字符的函數trim()

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g)
}

題目三：爲數字添加','分割符，例如123456789輸出123,456,789

function commafy(num) {
    return num && num.toString()
        .replace(/(\d)(?=(\d{3})+\.)/g, x => x + ',');
}

題目簡析：首先是&&，短路運算符，也就是至關於if...else，當num存在時，會返回後面的值。接下來是正則部分，注意?=後面的並不匹配，也就是好比12345678.9，實際匹配的值是2和5，在2和5後面加上','，就完成了預期。