• 關鍵詞：正則表達式

我的理解：明確目的規則，了解正則字符含義，拼湊正則規則模板，就像作者寫文章

 1. 正則表達式，又稱規則表達式。計算機科學的一個概念。正則表通常被用來檢索、替換那些符合某個模式(規則)的文本。
 2. 正則表達式語言由兩種基本字符類型組成：原義（正常）文本字符和元字符。元字符使正則表達式具有處理能力。
 3. 所謂元字符就是指那些在正則表達式中具有特殊意義的專用字符，可以用來規定其前導字符（即位于元字符前面的字符）在目標對象中的出現模式。

1. \d，\w，\s，[a-zA-Z0-9]，\b，.，*，+，?，x{3}，^$ 分別是什么?

2. 編寫函數trim(str)，功能：去除字符串兩邊的空白字符

• 思路

 1. 要求：刪除開頭結尾的空白字符
 2. 匹配：匹配開頭結尾的空白字符  // 開頭^; 空白字符\s; 出現任意次*; 或|; 結尾$; 
 3. 替換：替換掉匹配到的空白字符  // str.replace(x, y)

• 代碼

function trim(str){
    var deleteBlank = /^\s*|\s*$/g;  // 正則匹配篩選
    var back = str.replace(deleteBlank, '');  // 字符串替換去除
    return back;
}
var result1 = trim(' dd   dd dd   ');
var result2 = trim('   ddd ddd  dd');
console.log(result1);  // dd   dd dd
console.log(result2);  // ddd ddd  dd

3. 編寫函數isEmail(str)，功能：判斷用戶輸入的是不是郵箱

• 思路

 1. 要求：確定郵箱格式：xxx@xxx.com（對比163的部分規則）
 2. 建造：根據要求建立規則模式
 3. 判斷：用戶輸入格式是否符合要求
 4. 反饋：合法格式——提示：‘歡迎回來！’；非法格式——提示：‘郵箱輸入錯誤！’
 5. 防火，防盜，放拼寫錯誤！

• 代碼

function isEmail(str){
    var emailFormat = /^[a-zA-Z]\w{5,17}@\w+\.[a-z]{2,4}$/g;
    var back = emailFormat.test(str);  // 注意 test 的拼寫，不要錯寫為 text
    if(back === true){
        return '歡迎回來！';
    }else {
        return '郵箱輸入錯誤！';
    }
} 
var result1 = isEmail('nathanyang1991@163.com');
console.log(result1);  // 歡迎回來！
var result2 = isEmail('LOL7@qq.com');
console.log(result2);  // 郵箱輸入錯誤！

4.編寫函數isPhoneNum(str)，功能：判斷用戶輸入的是不是手機號

• 思路

 1. 要求：確定手機號碼格式：1xxxxxxxxxx 【2. 3. 略——翻看第2題】
 4. 反饋：合法格式——提示：‘歡迎回來！’；非法格式——提示：‘手機號碼輸入錯誤！’

• 代碼

function isPhoneNum(str) {
    var num = /^1\d{10}$/;
    var back = num.test(str);
    if(back === true){
        return '歡迎回來！';
    }else {
        return '手機號碼輸入錯誤！';
    }
}
var result1 = isPhoneNum('18966668888');
console.log(result1);  // 歡迎回來！
var result2 = isPhoneNum('6896666');
console.log(result2);  // 手機號碼輸入錯誤！

5. 編寫函數isValidUsername(str)，功能：判斷用戶輸入的是不是合法的用戶名

• 思路

 1. 要求：用戶名格式：長度6-20個字符，只能包括字母、數字、下劃線 
 4. 反饋：合法格式——提示：‘用戶名輸入正確！’；非法格式——提示：‘用戶名輸入錯誤！’

• 代碼

function isValidUsername(str){
    var username = /^\w{6,20}$/g;
    var back = username.test(str);
    if(back === true){
        return '用戶名輸入正確！';
    }else {
        return '用戶名輸入錯誤！';
    }
}
var result1 = isValidUsername('Teemo');   // 萌神提莫
console.log(result1);  // 用戶名輸入錯誤！
var result2 = isValidUsername('Ezreal');  // 伊澤瑞爾
console.log(result2);  // 用戶名輸入正確！

6. 編寫函數isValidPassword(str)，功能：判斷用戶輸入的是不是合法密碼

• 思路

 1. 要求：用戶名格式：長度6-20個字符，只包括大寫字母、小寫字母、數字、下劃線，且至少至少包括兩種 
 4. 反饋：合法格式——提示：‘密碼正確！’；非法格式——提示：‘密碼錯誤！’

• 代碼

function isValidPassword(str) {
    if(!/^\w{6,20}$/g.test(str)) return '密碼格式錯誤';  // 非 \w{6,20} 錯誤
    if(/^\d{6,20}$/g.test(str)) return '密碼格式錯誤';  // 全是數字 錯誤
    if(/^[a-z|A-Z]{6,20}$/g.test(str)) return '密碼格式錯誤';  // 全是字母錯誤
    if(/^_{6,20}$/g.test(str)) return '密碼格式錯誤';  // 全是下劃線錯誤
    return '密碼格式正確';  // 其他正確
}
var result1 = isValidPassword('mima666');
console.log(result1);  // 密碼格式正確
var result2 = isValidPassword('wodemima');
console.log(result2);  // 密碼格式錯誤
var result3 = isValidPassword('mima');
console.log(result3);  // 密碼格式錯誤

7. 編寫正則表達式，功能：得到如下字符串里所有的顏色

• 思路

 1. 要求：顏色格式—— #xxxxxx （16進制顏色）
 2. 建造：根據要求建立模式規則
 3. 篩選：匹配顏色字符，得到結果

• 代碼

/*var re = 正則補全*/
var re = /#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}!\w$/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee "
console.log( subj.match(re) )  // ['#121212', '#AA00ef']

8.1 下面代碼輸出什么? 為什么?

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;
str.match(pat);

• 輸出：" "hunger", hello "world" "
• 原因：

 1. 結果以字符串中出現的：第一個引號作為開始，最后一個引號作為結束 ———— 進行匹配劃分
 2. 首先匹配引號，并將引號作為字符串的開頭 "和結尾（不懂正則解析規則）"
 3. ' .* ' 相當于 任意字符{0,∞} ，貪婪模式下會按照無窮大進行匹配 
 4. 正則表達式默認處于貪婪模式（并未觸發其非貪婪模式，使用 ‘?’ 即可觸發）
 5. 貪婪模式：按規定的最大值進行匹配
 6. 非貪婪模式：按規定的最小值進行匹配

8.2 改寫代碼，讓其輸出["hunger", "world"]

• 思路

 1. 兩個字符串都以 引號 作為開頭和結尾：即見到 引號 就作為開頭和結尾進行劃分
 2. 應該觸發其非貪婪模式：按照最小值進行匹配
 3. 非貪婪模式：使用 ‘?’ 觸發，如下

• 代碼改寫

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*?"/g;
str.match(pat);

• 此時輸出：" "hunger", "world" "

本文章著作權歸饑人谷和作者所有，轉載須說明來源！