任務(wù)二十一~正則表達(dá)式

問答部分

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

\d~表示0到9之間的任意數(shù)字妓局，相當(dāng)于[0-9]

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

\w~表示匹配任意的字母、數(shù)字哺眯、下劃線谷浅，相當(dāng)于[A-Za-z0-9_]

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

\s~表示匹配空格符（包括制表符、空格符奶卓、斷行符）一疯，相當(dāng)于[\t\r\n\v\f]

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

[a-zA-Z0-9]~表示匹配大小寫字母和數(shù)字

/[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

*~表示某個(gè)模式出現(xiàn)0次或多次盏浙，相當(dāng)于{0,}

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

+~表示某個(gè)模式出現(xiàn)1次或多次眉睹，相當(dāng)于{1,}

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

?~表示某個(gè)模式出現(xiàn)0次或1次，相當(dāng)于{0,1}

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

x{3}~表示x恰好出現(xiàn)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

$~表示字符的結(jié)束位置，比如/js$/表示以js結(jié)束丐黄，如下代碼

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

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

貪婪模式~指{n,m}、?灌闺、+艰争、*這些在默認(rèn)情況下都是盡最大可能匹配，直到下一個(gè)字符不滿足匹配規(guī)則為止桂对，如下代碼

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

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

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

代碼部分

一、寫一個(gè)函數(shù)trim(str)跷坝，去除字符串兩邊的空白字符

實(shí)現(xiàn)代碼如下

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

代碼1

二倦蚪、使用實(shí)現(xiàn) addClass(el, cls)、hasClass(el, cls)痢法、removeClass(el,cls)狱窘，使用正則

實(shí)現(xiàn)代碼如下

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);
    }
}

三、寫一個(gè)函數(shù)isEmail(str)财搁，判斷用戶輸入的是不是郵箱

實(shí)現(xiàn)代碼如下

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

代碼3

四、寫一個(gè)函數(shù)isPhoneNum(str)提茁，判斷用戶輸入的是不是手機(jī)號

實(shí)現(xiàn)代碼如下

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

代碼4

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

實(shí)現(xiàn)代碼如下

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

六峭火、寫一個(gè)函數(shù)isValidPassword(str), 判斷用戶輸入的是不是合法密碼（長度6-20個(gè)字符毁习，包括大寫字母、小寫字母躲胳、數(shù)字蜓洪、下劃線至少兩種）

實(shí)現(xiàn)代碼如下

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

七、寫一個(gè)正則表達(dá)式坯苹，得到如下字符串里所有的顏色（比如#121212）

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

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

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

實(shí)現(xiàn)代碼如下

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);

輸出結(jié)果為：[""hunger" , hello "world""]粹湃，這是因?yàn)?code>.能匹配除回車符恐仑、換行符、段分隔符为鳄、行分隔符外的所有字符裳仆；*表示匹配0個(gè)或多個(gè)；而且在正則中默認(rèn)為貪婪模式孤钦，則其會(huì)盡可能多地匹配歧斟，可以使用非貪婪模式纯丸，如下代碼

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

代碼8

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

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

十觉鼻、補(bǔ)全如下正則表達(dá)式

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);