21.正则表达式

问答

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

• \d：匹配数字字符，等价于[0-9]，（digit数字缩写）

  
  Paste_Image.png

• \w：匹配单词字符，字母、数字下划线，等价于[a-zA-Z_0-9]，（word缩写）

  
  Paste_Image.png

• \s：匹配空白字符（空格 回车 tab 换行）（space缩写）

  
  Paste_Image.png

• [a-zA-Z0-9]匹配a到z，A到Z，0到9之间的任意字符

  
  Paste_Image.png

• \b匹配单词边界（boundary缩写）

  
  Paste_Image.png

• “.”匹配单个字符，除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。

  
  Paste_Image.png

• “*”出现零次或多次（任意次）

  
  Paste_Image.png

• +出现一次或多次（至少出现一次）

  
  Paste_Image.png

• ?出现零次或一次（最多出现一次）

  
  Paste_Image.png

Paste_Image.png

• x{3}：匹配x出现三次

  
  Paste_Image.png

• ^：以...开头；在[ ]中是类的取反，比如[^abc]表示取不包含abc中的任意一个字符串

  
  Paste_Image.png

Paste_Image.png

• $：以...结尾

  
  Paste_Image.png

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

1.贪婪模式是尽可能多的匹配，即匹配直到下一个字符不满足匹配规则为止。{n,m}、+、*在默认情况下都是贪婪模式。

'123456789'.match(/\d{3,5}/g); //["12345", "6789"]

2.非贪婪模式是尽可能少的匹配，即一旦条件满足，就不再往下匹配。在末尾加上?代表非贪婪模式。

'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]

Paste_Image.png

代码题

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

方法一：

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

Paste_Image.png

方法二：

function trim(str){
      return str.match(/\S+.+\S/);
}
trim(" hello world ");

Paste_Image.png

二、用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则

function hasClass(el, cls){ 注意：(\\s|^)和(\\s|$)表示左边是开头或者空格,右边是结尾或者空格
    var reg = new RegExp('(\\s|^)'+ cls +'(\\s|$)','g');
    return reg.test(el.className)
}

function addClass(el,cls){
    if(!reg.test(el.className)){
        return el.className+" "+cls;
    }

function removeClass(el,cls){
    if(reg.test(el.className)){
        return el.className.replace(cls,"");
    }
}

var el={
    className:"hello jirengu"
}

Paste_Image.png

三、写一个函数isEmail(str)，判断用户输入的是不是邮箱

function isEmail(str){
    var reg = /^[\w\.-]+@{1}[\w-]+\.[\w\.-]+$/;
    return reg.test(str);
}

Paste_Image.png

四、写一个函数isPhoneNum(str)，判断用户输入的是不是手机号

function isPhoneNum(str){
    return /^1[3-8](\d){9}$/.test(str)
}

Paste_Image.png

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

function isValidUsername(str){
    return /^\w{6,20}$/.test(str);
}

Paste_Image.png

六、写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）

function isValidPassword(str){
    if(/^\S{6,20}$/.test(str)){
       if(/^[a-z]*$|^[A-Z]*$|^\d*$|^\_*$/.test(str)){
          return '不合法密码'; 
       }else{
           return '合法密码';
       };
    }
    else{
        return false;
    };
}

方法二：

function isValidPassword(str){
    var reg = new RegExp ( '^\\S{6,20}$' ); //注意此处不能写成\w,否则无法通过第一个测试样例
    if(reg.test(str)){
        var count = 0;
        if(/\d/.test(str)){count++;}
        if(/[A-Z]/.test(str)){count++;}
        if(/[a-z]/.test(str)){count++;}
        if(/[_]/.test(str)){count++;}
    }
    if(count>1){return true;}
    else{return false;}
}
isValidPassword("hello'11111'");// true
isValidPassword("'0123'0123"); // false
isValidPassword("AAAaaa"); //true

七、写一个正则表达式，得到如下字符串里所有的颜色（#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]{6}|#[a-fA-F0-9]{3}/gi
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
console.log( subj.match(re) ) 

Paste_Image.png

八、下面代码输出什么? 为什么? 改写代码，让其输出hunger, world

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

输出结果：

Paste_Image.png

因为：首先开始匹配“符号，然后到了“.”符号，它是除了回车符和换行符之外的所有单个字符，这里它可以匹配引号，空格，“”符号是代表0个或多个，它默认是贪婪模式，所以“.”匹配到不能匹配为止，也就是匹配到hunger” , hello “world”。然后正则表达式里面还要匹配“符号，所有要回溯，刚好当前的位置就是”符号。

可以通过加上?变为非贪婪模式

var pat = /".*?"/g;
var c = str.match(pat);
for (var i in c){
    c[i] = c[i].replace(/["]/g,'');  // 去掉字符串的双引号
}
console.log(c); 

Paste_Image.png

如果要用贪婪模式，还可以这样

var pat = /["]\w*["]/g;
var c = str.match(pat);
for (var i in c){
    c[i] = c[i].replace(/["]/g,'');  //去掉字符串的双引号
}
console.log(c); 

Paste_Image.png

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

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

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

贪婪模式

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /<!--[^>]*-->/g;

str.match(re);

打印结果：

Paste_Image.png

非贪婪模式

str = '.. <!-- My -- comment \n test --> ..  <!----> .. '
re = /<!--[\W\w]*?-->/g;

str.match(re);

打印结果：

Paste_Image.png

十、补全如下正则表达式

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 str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re);

打印结果：

Paste_Image.png

非贪婪模式

var re = /<[^>]+?>/g;

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

打印结果：

Paste_Image.png

---