任务21-正则表达式

2017-01-02 本文已影响0人饥人谷_桶饭

问答

\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);//[""]

贪婪模式和非贪婪模式指什么?

贪婪模式：贪婪模式在正则表达式匹配成功的前提下，尽可能多的匹配。

"abbbbbbbb".match(/ab*/g)//["abbbbbbbb"]*代表出现0次或任意次，在匹配到a时其实就已经符合匹配的条件了，但在贪婪模式下它匹配到了它能匹配到符合条件的所有的b。

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

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

代码

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

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

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

使用实现 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>

写一个函数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"

写一个函数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"

写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）

function isValidUsername(str){
    var reg=/^\w{6,20}$/
    if (reg.test(str)) {
        return str
    }else{
        alert("请输入正确的用户名")
    }
}

写一个函数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)")
        }
    }

写一个正则表达式，得到如下字符串里所有的颜色（#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

下面代码输出什么? 为什么? 改写代码，让其输出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""]

补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)

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 -->', '<!---->'

补全如下正则表达式

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>'

任务21-正则表达式

问答

代码

猜你喜欢

热点阅读