任务21-正则表达式

问答

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

    • \d 查找数字
    "32 aa bCD -AD_ +-8/@!".match(/\d/g)//["3","2","8"]
    
    • \w 查找单词字符(包括英文字母,数字,下划线)
    "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 匹配单词边界(开头、结尾、空格分隔、中横线分隔)
    "hello world abc".match(/\bhello/g);//hello
    "hello world-hello".match(/\bhellb/g)//["hell"]
    
    • . 匹配单个字符(换行和行结束符除外)
    "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"]*代表出现0次或任意次,在匹配到a时其实就已经符合匹配的条件了,但在贪婪模式下它匹配到了它能匹配到符合条件的所有的b。
    

    非贪婪模式:就是匹配到结果就好,就少的匹配字符。

    "abbbbbbbb a abc".match(/ab?/g)//["ab", "a", "ab"]?代表出现0次或1次,也就是非贪婪模式,在已经匹配成功后,会尽可能少匹配。
    

代码

  1. 写一个函数trim(str),去除字符串两边的空白字符

    function time(str){
        return str.replace(/^\s+|\s+$/g,"");
    }
    
    var str = "   abc  def jkljkl ";
    console.log(time(str));//abc  def jkljkl
    
  2. 使用实现 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. 写一个函数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. 写一个函数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. 写一个函数isValidUsername(str),判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)

    function isValidUsername(str){
        var reg=/^\w{6,20}$/
        if (reg.test(str)) {
            return str
        }else{
            alert("请输入正确的用户名")
        }
    }
    
  6. 写一个函数isValidPassword(str), 判断用户输入的是不是合法密码(长度6-20个字符,只包括大写字母、小写字母、数字、下划线,且至少至少包括两种)

    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("请输入正确的密码(字母、数字、下划线,至少包含其中两种)")
                }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""]因为.匹配除换行和行结束符外的任意单个字符,而*在满足条件下会尽可能多的匹配,若要输出hunger,world,只要改写成非贪婪模式
    
    var str = 'hello  "hunger" , hello "world"';
    var pat =  /".*?"/g;
    str.match(pat);//[""hunger"", ""world""]
    
    
  9. 补全如下正则表达式,输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)

    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>'
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,724评论 6 479
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,104评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,142评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,086评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,076评论 5 370
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,914评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,220评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,871评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,318评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,834评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,951评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,574评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,162评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,162评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,383评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,349评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,652评论 2 343

推荐阅读更多精彩内容