正则表达式

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

• \d表示匹配数字

• \w表示匹配单词字符（字母、数字、下划线）

• \s表示匹配空白字符（空格、tab、换行、回车）

• [a-zA-Z0-9]表示匹配小写字母a到z、大写字母A到Z、数字0到9之间的任何一个字符

• \b表示匹配单词边界（包括开头，结尾，空格分隔，中横行分割）

• .表示匹配所有字符（除了换行和行结束符）

• n*表示匹配任何包含零个或多个n的字符串

• n+表示匹配任何一个包含至少一个n的字符串

• n?表示匹配任何包含零个或一个n的字符串

• x{3}表示包含3个x的序列的字符串

• ^n表示任何开头为n的字符串

• n$表示任何结尾为n的字符串

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

• 贪婪模式（默认）下，正则引擎会尽可能多的重复匹配字符
  举个栗子：
  var str = "<div><a>are u ok?</a></div>";
  str.match(/<.*>/g);

  1. 第一步，进行<的匹配，正则引擎在第一个位置匹配到了“<”
  2. 第二步，再进行.的匹配（.表示匹配任一字符），正则引擎匹配到了d
  3. 接着*表示前面的字符重复匹配0到多次，也就是重复匹配任一字符0到多次，正则引擎匹配到了所有字符。
  4. 文本结束后，.的匹配停止。接着匹配剩余的正则，遇到文本结束时，正则引擎会倒过来回溯，直到第一次匹配完后面的所有正则，即得到第一个匹配结果
  5. 由于这个正则是global的，正则引擎会从上一个结果后开始，继续匹配更多结果

• 非贪婪模式下，正则引擎会尽可能少的重复匹配字符
  还是上面的栗子，可在代表数量的标识符后加?来开启非贪婪模式，如：
  str.match(/<.*?>/g);
  同上：

  1. 第一步，进行<的匹配，正则引擎在第一个位置匹配到了“<”
  2. 第二步，再进行.的匹配（.表示匹配任一字符），正则引擎匹配到了d
  3. 接着，与贪婪模式不同的是，正则引擎并没有匹配所有字符，而是在匹配到d后，立即尝试后面正则的匹配，即>。（正则引擎在尝试用最小可能的重复次数来进行匹配）
  4. 如果>匹配失败，则继续重复匹配.。就这样没重复匹配一次.，便立即尝试>的匹配，直到第一次匹配成功，即得到第一个匹配结果
  5. 由于这个正则是global的，正则引擎会从上一个结果后开始，继续匹配更多结果

上述例子在两种模式下得到的结果如下：

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

/*方法一*/
function trim(str){
  var arr = str.split("");
  for(var i = 0; i < arr.length; i++){
    if(/\s/.test(arr[i]) == true){
      arr.splice(i, 1);
      i--;
    }
    else {
      for(var j = arr.length-1; j >= 0; j--){
        if(/\s/.test(arr[j]) == true){
          arr.pop();
        }
        else {
          str = arr.join("");
          return str;
        }
      }
    } 
  }
}

/*方法二*/
function trim(str){
  return str.replace(/(^\s+)|(\s+$)/g, '');
}

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

function addClass(el, cls){
  var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)", "g");
  if(reg.test(el.className) == false){
    el.className = el.className + " " +cls;
  }
}

function hasClass(el, cls){
  var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)", "g");
  return reg.test(el.className);
}

function removeClass(el, cls){
  var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)", "g");
  if(reg.test(el.className) == true){
    el.className = el.className.replace(reg, " ").replace(/\s{2,}/g, " ");
  }
}

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

 function isEmail(str){
  var reg = /^[\w-]+(\.[\w-]+)*@[a-zA-Z0-9][\w-]*\.[a-zA-Z]{2,}$/;
  return reg.test(str);
}

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

• 手机号码:
  13[0-9], 14[5,7], 15[0, 1, 2, 3, 5, 6, 7, 8, 9], 17[0, 1, 6, 7, 8], 18[0-9]
• 移动号段：
  134,135,136,137,138,139,147,150,151,152,157,158,159,170,178,182,183,184,187,188
• 联通号段:
  130,131,132,145,152,155,156,170,171,176,185,186
• 电信号段:
  133,134,153,170,177,180,181,189
  function isPhoneNumber(str){
  var reg = /^1((3[0-9])|(4[47])|(5[0-9])|(7[01678])|(8[0-9]))[0-9]{8}$/;
  return reg.test(str);
  }

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

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

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

function isValidPassword(str){
  str = str.replace(/(^\s+)|(\s+$)/g, '');
  if(str.length < 6 || str.length > 20){
    return "密码必须为6到20位";
  }
  if(/\W/.test(str)){
    return "密码只能是大写字母、小写字母、数字、下划线中至少两种";
  }
  if(/(^[a-z]+$)|(^[A-Z]+$)|(^\d+$)|(^_+$)/g.test(str)){
    return "密码只能是大写字母、小写字母、数字、下划线中至少两种";
  }
  return true;
}

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

var re = /#[a-fA-f0-9]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 ";
alert( subj.match(re) );

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

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

---

因为/".*"/是贪婪模式，正则引擎会尽可能多的匹配引号之间的内容

var str = 'hello "hunger" , hello "world"';
var pat = /".*?"/g;  // 加？转换成非贪婪模式
str.match(pat); 

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

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

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

---

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

/*非贪婪模式*/
str = '.. <!-- My -- comment \n test --> ..  <!----> .. ';
re = /<!--[\s\S]*?-->/g;

十二、补全如下正则表达式

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

---

本文版权属吴天乔所有，转载务必注明出处。