正则表达式

问答

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

• \d：查找数字

• \w：查找单词字符（字母、数字、下划线)

• \s：查找空白字符（空格、回车、换行、tab）

• [a-zA-Z0-9]：查找方括号之间的任何字符

• \b：匹配一个单词边界（包括 开头、结尾、空格分割、中横线分割），不匹配任何字符
  

  eg1： Paste_Image.png
  匹配结果是：成功；匹配到的内容是："@a"；匹配到的位置是：开始于2，结束于4。
  

  进一步说明："/b" 与 "^" 和 "$" 类似，本身不匹配任何字符，但是它要求它在匹配结果中所处位置的左右两边，其中一边是 "/w" 范围，另一边是 非"/w" 的范围。
  

  eg2： Paste_Image.png
  匹配结果是：成功；匹配到的内容是："end"；匹配到的位置是：开始于15，结束于18。

• *：匹配任何0次或多次规则相符的字符串

• +：匹配任何至少包括一次规则相符的字符串

• ?：匹配任何0个或一个规则相符的字符串

• x{3}：匹配3个x的序列的字符串

• ^：与字符串开始的地方匹配，不匹配任何字符

• $：与字符串结束的地方匹配，不匹配任何字符

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

• 贪婪模式:量词在默认下是尽可能多的匹配的，例如：

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

非贪婪模式:让正则表达式尽可能少的匹配，一旦成功匹配不再继续尝试，在量词后加上?即可，例如：

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

• 编程中如何区分两种模式
  　　默认是贪婪模式；在量词后面直接加上一个问号？就是非贪婪模式。
  　　量词：{m,n}：m到n个
  　　　　　*：任意多个
  　　　　　+：一个到多个
  　　　　　？：0或一个
  参考

代码题

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

function trim(str){
    var  reg =/^\s+|\s+$/g;
    console.log( str.replace(reg,'' ));
}

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

function hasClass(el, cls) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)')//\\s:需要匹配“\s”本身需要转义符辅助表达
    return reg.test(el.className);
}
function addClass(el,cls){
    var str =el.className;
    if(!hasClass(el,cls)){
        str +=' '+ cls;
    }
}
function removeClass(el,cls){
    var str =el.className;
    if(hasClass(el,cls)){
        str= str.replace(cls,'');
        return str;
    }
    else str;
}

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

function isEmail(str){
  var reg =/\S+[@]{1}(\S)+\.\w+/;
  if(reg.test(str)){console.log("有效邮箱")}
  else  {console.log("无效邮箱")}
}

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

function isPhoneNum(str){
    var reg=/ ^1[358]\d{9}$/;
    if (reg.test(str)) {
        console.log('有效的手机号码');
    }else{
        console.log("无效的手机号码");
    }
}

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

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

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

function isValidPassword(str){
    var rag1=/^\w+{6,20}$/;
    var rag2=/(^[0-9]+$)|(^[a-z]+$)|(^[A-Z]+$)|(^_+$)/;
    if(rag1.test(str)==true){
        if(rag2.test(str)==true){
            alert("格式错误");
        }
        else{
            return str;
        };
    }
    else{
        alert("格式错误");
    }
};

七、写一个正则表达式，得到如下字符串里所有的颜色（#121212）

Paste_Image.png

var re = /[#]{1}[0-9a-fA-F]{6}/g;

var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "

console.log( subj.match(re) )  // #121212,#AA00ef

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

输出： Paste_Image.png

原因：因为处于贪婪模式，匹配" "之间的除了换行和回车之外的任意字符
改写：

//非贪婪模式
var str = 'hello  "hunger" , hello "world"';
var pat =  /".*?"/g;
str.match(pat); // "hunger","world"
//贪婪模式
var str = 'hello  "hunger" , hello "world"';
var pat=/"[^"]+"/g;
str.match(pat); 
[""hunger"", ""world""]

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

Paste_Image.png

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

十、补全如下正则表达式

Paste_Image.png

//非贪婪模式：
var re = /<[^>]+?>/g;
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) // '<a href="/">', '<input type="radio" checked>', '<b>'