問答部分

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

• \d~表示0到9之間的任意數字，相當于[0-9]

/\d/.test("231");//true
/\d/.test("abc");//false

• \w~表示匹配任意的字母、數字、下劃線，相當于[A-Za-z0-9_]

/\w/.test("1-32-5");//true
/\w/.test("ADCapc");//true

• \s~表示匹配空格符（包括制表符、空格符、斷行符），相當于[\t\r\n\v\f]

/\s/.test("hellohunger");//false
/\s/.test("hello hunger");//true

• [a-zA-Z0-9]~表示匹配大小寫字母和數字

/[a-zA-Z0-9]/.test("adcAPC");//true

• \b~表示匹配單詞的邊界

/\bcss/.test("html css");//true
/\bcss/.test("html-css");//true
/\bcss/.test("htmlcss");//false

• .~表示匹配除回車符（\r）、換行符（\n）、行分隔符（\u2028）、段分隔符（\u2029）之外的所有字符，如下代碼

/d.g/.test("dog");//true
/d.g/.test("d-g");//true
/d.g/.test("d\ng");//false
/d.g/.test("doog");//false

• *~表示某個模式出現0次或多次，相當于{0,}

/cs*/.test("css");//true
/cs*/.test("ccc");//true

• +~表示某個模式出現1次或多次，相當于{1,}

/cs+p/.test("cp");//false
/cs+p/.test("csp");//true

• ?~表示某個模式出現0次或1次，相當于{0,1}

/fo?t/.test("foot");//false
/fo?t/.test("fot");//true

• x{3}~表示x恰好出現3次

/x{3}/.test("xxx");//true
/x{3}/.test("xx");//false
/x{3}/.test("xxxxxx");//true
/ax{3}b/.test("axxxxxb");//false

• ^~表示字符的開始位置，比如/^js/表示以js開始，如下代碼

/^jirengu/.test("jirengu");//true
/^jirengu/.test("aajirengu");//false

• $~表示字符的結束位置，比如/js$/表示以js結束，如下代碼

/jirengu$/.test("jirengu");//true
/jirengu$/.test("jirenguhahaha");//false

二、貪婪模式和非貪婪模式指什么?

• 貪婪模式~指{n,m}、?、+、*這些在默認情況下都是盡最大可能匹配，直到下一個字符不滿足匹配規則為止，如下代碼

var str = "aaaabbbccc";
str.match(/a{1,3}/);//["aaa"]，{1,3}表示1,2,3都可以，由于貪婪模式，就會盡可能的匹配，
所以匹配三個
str.match(/a*/);//["aaaa"]，貪婪模式將會把所有的a都匹配到并返回到數組里
str.match(/a+/);//["aaaa"]

• 非貪婪模式~讓正則表達式盡可能少的匹配，即一旦匹配成功，就不再往下匹配，在量詞后面加上?即可，如下代碼

var str = "foot school";
str.match(/o{0,2}/);//[""]
str.match(/o*?/);//[""]
str.match(/o+?/);//["o"]

代碼部分

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

• 實現代碼如下

function trim(str){
    return str.replace(/^\s+|\s+$/g,"");
}

代碼1

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

• 實現代碼如下

function addClass(el,cls){
    var reg = new RegExp("(\\s|^)" + cls + "(\\b|$)","g");
    if(!reg.test(el.className)){
        return el.className += " " + cls;
    }else{
        console.log(cls + "already exist");
    }
}
function hasClass(el,cls){
    var reg = new RegExp("(\\s|^)" + cls + "(\\b|$)","g");
    return reg.test(el.className);
}
function removeClass(el,cls){
    var reg = new RegExp("(\\s|^)" + cls + "(\\b|$)","g");
    if(reg.test(el.className)){
        return el.className.replace(reg,""); 
    }else{
        console.log("can not find" + cls);
    }
}

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

• 實現代碼如下

//假設是字母郵箱注冊規則：6~18個字符，可使用字母、數字、下劃線，需以字母開頭
function isEmail(str){
    var reg = /^[a-zA-Z]{1}\w{5,17}@\w+\.[\w\.]+$/g;
    return reg.test(str);
}

代碼3

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

• 實現代碼如下

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

代碼4

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

• 實現代碼如下

function isValidUsername(str){
    var reg = /^\w{6,20}$/;
    if(reg.test(str)){
        console.log("Your username:" + str + " is legal");
    }else{
        console.log("Your username:" + str + " is not legal");
    }
}

代碼5

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

• 實現代碼如下

function isValidPassword(str){
    var reg = /^\w{6,20}$/,
        capital = /^[A-Z]{6,20}$/,
        lowercase = /^[a-z]{6,20}$/,
        digit = /^\d{6,20}$/,
        underline = /^_{6,20}$/; 
    if(reg.test(str)){
        if(capital.test(str) | lowercase.test(str) | digit.test(str) | underline.test(str)){
            return false;
        }else{
            return true;
        }
    }else{
        return false;
    }
}

代碼6

七、寫一個正則表達式，得到如下字符串里所有的顏色（比如#121212）

var re = /*正則...*/

var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "

alert( subj.match(re) )  // #121212,#AA00ef

• 實現代碼如下

var reg = /#[A-Za-z0-9]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 ";
console.log(subj.match(reg));  // #121212,#AA00ef

代碼7

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

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

輸出結果為：[""hunger" , hello "world""]，這是因為.能匹配除回車符、換行符、段分隔符、行分隔符外的所有字符；*表示匹配0個或多個；而且在正則中默認為貪婪模式，則其會盡可能多地匹配，可以使用非貪婪模式，如下代碼

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

代碼8

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

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /.. your regexp ../

str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

• 貪婪模式

var str = '.. <!-- My -- comment \n test --> ..  <!----> .. ';
var reg = /<!--[^>]*-->/g;
str.match(reg);

代碼9

• 非貪婪模式

var str = '.. <!-- My -- comment \n test --> ..  <!----> .. ';
var reg = /<!--[\W\w]*?-->/g;
str.match(reg);

代碼9

十、補全如下正則表達式

var re = /* your regexp */
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

• 貪婪模式

var reg = /<[^>]+>/g;
var str = '<> <a href="/"> <input type="radio" checked> <b>';
str.match(reg);

代碼10

• 非貪婪模式

var reg = /<[a-z].*?>/g;
var str = '<> <a href="/"> <input type="radio" checked> <b>';
str.match(reg);

代碼10

版權聲明：本教程版權歸鄧攀和饑人谷所有，轉載須說明來源！！！！