問答

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

1.\d    //數字
var str="Hello world 3"
str.match(/\d/g)  // 3
2.\w   //單詞字符，字母、數字下劃線
var str="Hello world_3#"  
str.match(/\w/)  // [ 'H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd', '_', '3' ]
3.\s    //空白符
var str="Hello world_3#"  
str.match(/\w/)  // [ ' ' ]
4.[a-zA-Z0-9]    //從a至z，從A至Z，從0至9
var str="Hello world_3#"  
str.match(/\w/)  //  [ 'H', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd', '3' ]
5.\b    //匹配單詞邊界
var str="Hello world_3#"  
str.match(/\w/)  //  [ 'Hello' ]
6.. //除了回車和換行之外的所有字符
var str="Hello _3#"  
str.match(/\w/)  //  [ 'H', 'e', 'l', 'l', 'o', ' ', '_', '3', '#' ]
7.*    //出現零次或多次（任意次）
var str="Hello world_3#,how are you"  
str.match(/how*/g)  //  [ 'how' ]
8.+    //出現一次或多次（至少一次）
var str="Hello world_3#,how are you"  
str.match(/how*/g)  //  [ 'how' ]
9.？    //出現零次或一次(至多一次)
var str="Hello world_3#,howhow are you"  
str.match(/how?/g)  //  [ 'how'  'how' ]
10.x{3}    //x出現3次
var str="Hello world_123#,how12how are you"  
str.match(/\d{3}/g)  //  [ '123' ]
11.^$    //^匹配以該字符開頭；$匹配以該字符結尾
var str="Hello world_123#,how are you"  
str.match(/^Hello/g)  //  [ 'Hello' ]
str.match(/you$/g)  //  [ 'you' ]

2. 貪婪模式和非貪婪模式指什么?

貪婪模式：最大長度匹配，也就是滿足條件盡可能多的匹配
非貪婪模式：匹配到結果就好，盡可能少的匹配
正則默認的是貪婪模式

代碼

1. 寫一個函數trim(str)，去除字符串兩邊的空白字符

var str="   How are you?   "
function trim(str){
    if(str.match(/^\s|\s$/)){
        return str.replace(/^\s+|\s+$/g,'')
    }
    else
        return str;
}
console.log(trim(str))

2. 使用實現 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正則

//提示: el為dom元素，cls為操作的class， el.className獲取el元素的class
function addClass(el, cls){
    var reg = new RegExp("\\b"+cls+"\\b","g");
    if( (el.className).match(reg) ){
        return className += ' '+cls;
    }
}
function hasClass(el, cls){
    var reg = new RegExp('\\b'+cls+'\\b','g');
    return (el.className).match(reg);
}
function removeClass(el,cls){
    var reg = new RegExp("\\b"+cls+"\\b","g");
    if( (el.className).match(reg) ){
        return ( el.className ) = ( el.className ).replace(reg,'') ;
    }
}
var el = document.getElementById('test');
var cls = 'wrap';

3. 寫一個函數isEmail(str)，判斷用戶輸入的是不是郵箱

function isEmail(str){
    reg=/(^\w+)\@(\w+)\.com$/g;
    return reg.test(str);
}

4. 寫一個函數isPhoneNum(str)，判斷用戶輸入的是不是手機號

function isPhoneNum(str){
    reg=/^1[3-8]\d{9}$/;
    return reg.test(str);
}

5. 寫一個函數isValidUsername(str)，判斷用戶輸入的是不是合法的用戶名（長度6-20個字符，只能包括字母、數字、下劃線）

function isValidUsername(str){
    reg=/^\w{6,20}$/;
    return reg.test(str)? "合法":"非法";
}

6. 寫一個函數isValidPassword(str), 判斷用戶輸入的是不是合法密碼（長度6-20個字符，包括大寫字母、小寫字母、數字、下劃線至少兩種）

function sValidPassword(str){
    if(/[^\w]+/.test(str)){
        return false;
    }
    else if(/[^\w]{6,20}/.test(str))
        return false;
    else if(/^[0-9]+$|^[a-z]+$|^[A-Z]+$/.test(str))        
        return false;
    else
        return true;
}

7. 寫一個正則表達式，得到如下字符串里所有的顏色

var reg = /#[0-9a-zA-Z]{6}/g
var subj = "color: #121212;background-color: #AA00ef;width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) //#121212,#AA00ef

8. 下面代碼輸出什么? 為什么? 改寫代碼，讓其輸出hunger, world.

var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat);
// "hunger" , hello "world" 因為.*為貪婪模式 會盡可能多的匹配其中的字符
// 修改一
var str = 'hello "hunger" , hello "world"';
var pat = /".*?"/g;
str.match(pat);
// 加上？就會變成懶惰模式 
// 修改二
var str = 'hello "hunger" , hello "world"';
var pat = /"[^"]+"/g;
str.match(pat); 

9. 補全如下正則表達式，輸出字符串中的注釋內容. (可嘗試使用貪婪模式和非貪婪模式兩種方法)

// 貪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[\W\w]*?-->/g
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
// 非貪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<[^<]+>/g
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

10. 補全如下正則表達式

var re = /<[^>]+>?/g
var str = '<> <a href="/"> <input type="radio" checked> <b>'
console.log(str.match(re)) // '<a href="/">', '<input type="radio" checked>', '<b>'

本文版權歸本人（簾外修竹）所有，轉載須說明來源