任務21-正則表達式

問答

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

    • \d 查找數(shù)字
    "32 aa bCD -AD_ +-8/@!".match(/\d/g)//["3","2","8"]
    • \w 查找單詞字符(包括英文字母，數(shù)字，下劃線)
    "1234ascddABC_".match(/\w/g);//["1", "2", "3", "4", "a", "s", "c", "d", "d", "A", "B", "C", "_"]
    • \s 查找空白字符(空格、tab、換行、回車)
    "a aaa  abc".match(/\s/g); //[" ", "    "]
    • [a-zA-Z0-9] 查找a-z、A-Z、0-9的字符，和\w相比少了一個下劃線，從正則的分類來說，一個屬于方括號類型，一個屬于元字符類型
    "1234ascddABC_".match(/[0-9a-zAZ]/g);//["1", "2", "3", "4", "a", "s", "c", "d", "d", "A"]
    • \b 匹配單詞邊界(開頭、結(jié)尾、空格分隔、中橫線分隔)
    "hello world abc".match(/\bhello/g);//hello
"hello world-hello".match(/\bhellb/g)//["hell"]
    • . 匹配單個字符(換行和行結(jié)束符除外)
    "hello 01\n".match(/./)//["h"]
    • *匹配零個或者多個前面的字符串（貪婪模式， 盡可能多的取前面字符串）
    "abc abbc abbbcc abbbbcde".match(/ab/g);//["ab", "ab", "ab", "ab"]
"abc abbc abbbcc abbbbcde".match(/ab*/g);//["ab", "abb", "abbb", "abbbb"]
    • +匹配一個或多個前面的字符串
    "abc abbc abbbcc abbbbcde".match(/ab+/g);//["ab", "abb", "abbb", "abbbb"]
    • ? 零或者多個前面的字符串（非貪婪模式， 盡可能少的取前面字符串）；
    "abc abbc abbbcc abbbbcde".match(/ab/g);//["ab", "ab", "ab", "ab"]
"abc abbc abbbcc abbbbcde".match(/ab?/g);//["ab", "ab", "ab", "ab"]
    • x{3} 包含3個x的字符串
    "abc abbc abbbcc abbbbcde".match(/abb{3}/g);//["abbbb"]
    • ^$匹配空字符
    "abc,abbc,1,A,_,*".match(/^$/g);//null
"".match(/^$/g);//[""]

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

    貪婪模式：貪婪模式在正則表達式匹配成功的前提下，盡可能多的匹配。

    "abbbbbbbb".match(/ab*/g)//["abbbbbbbb"]*代表出現(xiàn)0次或任意次，在匹配到a時其實就已經(jīng)符合匹配的條件了，但在貪婪模式下它匹配到了它能匹配到符合條件的所有的b。

    非貪婪模式：就是匹配到結(jié)果就好，就少的匹配字符。

    "abbbbbbbb a abc".match(/ab?/g)//["ab", "a", "ab"]？代表出現(xiàn)0次或1次，也就是非貪婪模式，在已經(jīng)匹配成功后，會盡可能少匹配。

代碼

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

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

var str = "   abc  def jkljkl ";
console.log(time(str));//abc  def jkljkl

  2. 使用實現(xiàn) addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正則
    ps： 視頻里問題糾正

         <div id="div1" class="color border"></div>
    <script type="text/javascript">
    var div = document.getElementById("#div1");
    function hasClass(el, cls) {
        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)", "g")   
        return reg.test(el.className)
    }
    function addClass(el, cls) {
        if (!hasClass(el, cls)) {
            el.className += " " + cls
        }
    }
    function removeClass(el, cls) {
        if (hasClass(el, cls)) {
            el.className = el.className.replace(cls,            "").replace(/\s{2,}/g, "")
        }
    }
    hasClass(div1, "color") //true
    hasClass(div1, "bg-color") //false
    addClass(div1, "fontsize") //undefined
    div1.className //"color border fontsize"
    removeClass(div1, "color") //undefined
    div1.className //"border fontsize"
    </script>

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

    function isEmail(str) {
        var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
        if (reg.test(str)) {
            return str
        } else {
            alert("請輸入正確的郵箱格式")
        }
    }
    isEmail("abc") //"請輸入正確的郵箱格式"
    isEmail("97529288@qq.com") //"97529288@qq.com"

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

    function isPhoneNum(str){
    var reg=/^1[0-9]{10}$/;
    if (reg.test(str)) {
        return str
    }else{
        alert("請輸入正確的手機號")
    }
}
var str="13901234567901"
isPhoneNum(str)//輸出："請輸入正確的手機號"
var str="13901234567"
isPhoneNum(str)//輸出："13901234567"

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

    function isValidUsername(str){
    var reg=/^\w{6,20}$/
    if (reg.test(str)) {
        return str
    }else{
        alert("請輸入正確的用戶名")
    }
}

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

    function isValidPassword(str){
        var reg=/^\w{6,20}$/;
        var reg1=/(^[a-z]+$)|(^[A-Z]+$)|(^[0-9]+$)|(^_+$)/;
        if (reg.test(str)) {
            if(reg1.test(str)){
             alert("請輸入正確的密碼(字母、數(shù)字、下劃線，至少包含其中兩種)")
            }else{
                alert("設置成功");
            }
        }else{
            alert("請輸入正確的密碼(長度6-20)")
        }
    }

  7. 寫一個正則表達式，得到如下字符串里所有的顏色（#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 = /#[e-fA0-2]{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);  

    var str = 'hello  "hunger" , hello "world"';
var pat =  /".*"/g;
str.match(pat);//[""hunger" , hello "world""]因為.匹配除換行和行結(jié)束符外的任意單個字符,而*在滿足條件下會盡可能多的匹配，若要輸出hunger,world,只要改寫成非貪婪模式

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

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

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

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

    //非貪婪模式
str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
  re = /<!--{FNXX==XXFN}*-->/g
  str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

  10. 補全如下正則表達式

    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 = /<[a-z][\w\W]*?>/g
    var str = '<> <a href="/"> <input type="radio" checked> <b>'
    str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

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

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