正則表達(dá)式

問答

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

  • \d：查找數(shù)字；\D 查找非數(shù)字字符。
var str = "a1b2c3"
var patt1 = /\d/g  //g表示全局調(diào)用
var patt2 = /\d/  //非全局調(diào)用
console.log(str.match(patt1))
consloe.log(str.match(patt2))
  • \w：查找單詞字符（字母、數(shù)字、下劃線）；\W：查找非單詞字符。
var str = "a1b2c3"
var patt1 = /\w/g  //g表示全局調(diào)用
var patt2 = /\w/  //非全局調(diào)用
console.log(str.match(patt1))
consloe.log(str.match(patt2))
  • \s：查找空白字符（空格、tab、換行、回車）；\S：查找非空白字符。
var str = "You are the best"
var patt1 = /\s/g
var patt2 = /\s/
console.log(str.match(patt1))
consloe.log(str.match(patt2))
  • [a-zA-Z0-9]：查找任何從a到z、從A到Z以及0到9的字符或者數(shù)字。（中括號表示匹配內(nèi)部任意字符，可以連寫）
  • \b：匹配單詞邊界；\B：匹配非單詞邊界。(這里的單詞邊界包括開頭、結(jié)尾、空格、中橫線分隔)
var str = "front-end"
var patt1 = /\ben/g  //匹配單詞中的en
console.log(str.match(patt1))
  • .：查找單個字符（除了換行和行結(jié)束符）。
var str = "That's hot"
var patt1 = /h.t/g  //匹配hat和hot
console.log(str.match(patt1))
  • *： 出現(xiàn)零次或多次（任意次）。
var str = "front end engineer"
var patt1 = /ne*/g  //e出現(xiàn)零次或多次
console.log(str.match(patt1))
  • +：出現(xiàn)一次或多次（至少出現(xiàn)一次）。
var str = "front end engineer"
var patt1 = /ne+/g  //e出現(xiàn)一次或多次
console.log(str.match(patt1))
  • ?：出現(xiàn)零次或一次（最多出現(xiàn)一次）。
var str = "front end engineer"
var patt1 = /ne?/g  //e出現(xiàn)零次或一次
console.log(str.match(patt1))
  • x{3}：匹配包含3個x的序列的字符串。
var str = "10 1000 10000"
var patt1 = /\d{3}/g
console.log(str.match(patt1))
  • ^：以x開頭的字符串
var str="Is this his"
var patt1=/^Is/g
console.log(str.match(patt1))
  • $：以x結(jié)尾的字符串
var str="Is this his"
var patt1=/is$/g
console.log(str.match(patt1))

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

  • 貪婪模式
    上面已經(jīng)舉過例子了，像? + * {n} {n,m} {n,} {,m}這些量詞在默認(rèn)情況下都是盡可能多的匹配，這就是所謂的貪婪模式。
  • 非貪婪模式
    非貪婪模式就是和貪婪模式相反，它指的是盡可能少的匹配，一旦匹配到了就不再匹配，也就是在量詞2后面加上?。

代碼

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

實現(xiàn)方式：

function trim(str) {
    var patt = /^\s+|\s+$/g
    return str.replace(patt, '')
}
console.log(trim(" front end engineer "))

二、使用正則實現(xiàn)addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)。

一個元素的class中間以空格隔開，首先要判斷原來的class中是否包含要添加/刪除的class再進(jìn)行操作。


//提示:el為dom元素，cls為操作的class，el.className獲取el元素的class
function hasClass(el, cls) {
    //var reg = /^\s+|\s+$/g
    var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)')//因為b包括中橫線，所以開頭不能用\b
    return reg.test(el.className)
}
function addClass(el, cls) {
     if (!hasClass(el, cls)) {
        return el.className += ' ' + cls 
    }
}
function removeClass(el, cls) {
    if (hasClass(el, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)', 'g')
        el.className = el.className.replace(reg, '')
    }
}
var n = {
    className: "aside main extra"
}
console.log(hasClass(n, "main"))
addClass(n, "color")
console.log(n.className)
removeClass(n, "aside")
console.log(n.className)

一開始測試的時候用的變量名為name，導(dǎo)致結(jié)果一直不對。因為var name等于window.name，而這個name是無法修改的。另外還需要注意的是以后測試不要放在控制臺，要寫頁面測試。

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

郵箱：name@domain。
規(guī)則：name可以使用任意ASCII字符，大小寫英文字母 a-z,A-Z；數(shù)字 0-9；字符!#$%&'*+-/=?^_`{|}~；字符 .不能是第一個和最后一個，不能連續(xù)出現(xiàn)兩次。
domain僅限于26個英文字母，10個數(shù)字和連字符-（不能是第一個），長度為2~6。

function isEmail(str) {
    var reg = /^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-z0-9]+)*)+\.[a-z]{2,6})$/i  //本來name部分應(yīng)該可以是任意ASCII字符（!#$%&'*+-/=?^_`{|}~），但是試了好久，結(jié)果一直不對，就簡化了，驗證規(guī)則不是很完美。
    return reg.exec(str)
}
    console.log(isEmail('.cttin@163.com'))
    console.log(isEmail('cttin@www.commmmm'))
    console.log(isEmail('cttin@163.com'))

后來找了一下資料發(fā)現(xiàn)把上面的\w換成A-Za-z0-9，可以成功運行，不需要轉(zhuǎn)義，不是很明白什么原因。

function isEmail(str) {
    var reg = /^[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@((?:[a-z0-9]+(?:-[a-z0-9]+)*)+\.[a-z]{2,6})$/i 
    return reg.exec(str)
}

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

function isPhoneNum(str) {
    var reg = /^1[3,4,5,7,8]\d{9}$/
    return reg.test(str)
}
console.log(isPhoneNum('13456890711'))
console.log(isPhoneNum('13c11111111'))
console.log(isPhoneNum('12345678901'))

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

function isValidUsername(str) {
    var reg = /^\w{6,20}$/
    return reg.test(str)
}
console.log(isValidUsername('sss4ffffffffffffgggggggg'))
console.log(isValidUsername('dd_fffff12'))

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

方法一，switch：

function isValidPassword(str) {
    var trueNumber = 0
    var reg = /^\w{6,20}$/
    if(reg.test(str)) {
        switch (true) {
            case(/[A-Z]/.test(str)): trueNumber++;
            case(/[a-z]/.test(str)): trueNumber++;
            case(/\d/.test(str)): trueNumber++;
            case(/[_]/.test(str)): trueNumber++;
            default: break;
        }
    }
     if(trueNumber >= 2) {
        return true;
    }else {
        return false;
    }
}
console.log(isValidPassword('_12abAB--')) 
console.log(isValidPassword('12abA')) 
console.log(isValidPassword('_12ab_')) 
console.log(isValidPassword('123456'))

方法二，排除法：

function isValidPassword(str) {
   // if(/\w{,6}|\w{20,}/.test(str)) {   這里不能這么寫，最小值不能省略。
    if(/\w{0,6}|\w{20,}/.test(str)) {
        return false;  //排除長度不是6-20的字符
    }else if(/[^a-zA-Z0-9_]$/.test(str)) {
        return false;  //排除非大寫字母、小寫字母、數(shù)字和下劃線的字符串
    }else if(/^[a-z]+$|^[A-Z]+$|^[0-9]+$|^[_]+$/.test(str)) {
        return false;  //排除只有大寫字母、小寫字母、數(shù)字或者下劃線其中一種的字符串
    }else {
        return true;
    }
}
console.log(isValidPassword('222222'))

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

var re = /*正則...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) )  // #121212,#AA00ef

var re = /#[a-fA-F0-9]{3}\s|#[a-fA-F0-9]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) //  ["#121212", "#AA00ef", "#fd2 "]（#fd2也是顏色）

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

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

代碼輸出："hunger" , hello "world"
因為這里默認(rèn)為貪婪模式，會盡可能多的匹配。
若要輸出hunger, world，改成非貪婪模式就可以。

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

九、補全如下正則表達(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 re = /<!--[^>]*-->/g;
str.match(re); // '<!-- My -- comment \n test -->', '<!---->'

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

十、補全如下正則表達(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 re = /<[^>]+>/g
// 非貪婪模式
var re = /<[a-z].*?>/g 

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

還是九月份寫的，沒有發(fā)表，繼續(xù)回來加油了。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • RegExp 三大方法本文的RegExp采用直接量語法表示：/pattern/attributes。attribu...
    恩德_b0c2閱讀 539評論 0贊 0
  • 參考博文：http://www.cnblogs.com/tugenhua0707/p/5037811.html 1...
    createEngine閱讀 765評論 0贊 0
  • 前言 作為一個程序員，要出去裝逼，手中必備的技能就是正則表達(dá)式。程序員的正則表達(dá)式，醫(yī)生的處方和道士的鬼畫符，都是...
    Layzimo閱讀 688評論 0贊 6
  • 初衷：看了很多視頻、文章，最后卻通通忘記了，別人的知識依舊是別人的，自己卻什么都沒獲得。此系列文章旨在加深自己的印...
    DCbryant閱讀 4,260評論 0贊 20
  • 如果說前二個咖啡館都不算真正意義上的咖咖啡館，那開在新世界國貿(mào)大廈寫字樓的才算第一間真正的參差咖啡館，名字...
    秀麗有約閱讀 342評論 2贊 12

友情鏈接更多精彩內(nèi)容