正则表达式

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

\d是查找数字（digital），数字0~9会被匹配到。
\w是查找单词（word），字母、下划线、数字都会被匹配到。
\s是查找空格（space），空格会被匹配到。
[a-zA-Z0-9]查找单个在此范围内的字符，此例大小写字母和数字都会被匹配到，非全局。
\b是指词边界（border），可以用两个\b将要匹配的字符包裹。
.是指代任意字符除了回车、换行和分隔符，使用后类似模糊匹配。
*是指匹配0个或多个，类似｛0，｝；
+是指匹配1个或多个，类似｛1，｝
?是指匹配0个或1个，类似｛0，1｝
x{3}是指匹配含3个x的字符，就是xxx。
^是指定整个字符串以哪个字符开头。
$是指定整个字符串以哪个字符结尾。

贪婪模式和非贪婪模式

贪婪模式是指匹配时按最大可能去匹配，直到下一个字符不满足条件为止；
非贪婪模式是指匹配时按最小满足条件去匹配，只要满足条件后就不再匹配。

小练习

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

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

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

  // el为dom元素，cls为操作的class， el.className获取el元素的class**
  function hasClass(el, cls){
    var regex=new RegExp('\\b'+cls+'\\b','g');
    return regex.test(el.className);
  }
  function addClass(el, cls){
    if(hasClass(el,cls)===false){
      el.className += " "+cls;
    }
  }
  function removeClass(el,cls){
    if(hasClass(el,cls)===true){
      var regex=new RegExp('\\b'+cls+'\\b','g');
      el.className=el.className.replace(regex,"");
      el.className=el.className.replace(/\s{2}/g," ");
    }
  }
  var el={className:"clear btn foot"};
  hasClass(el,'foot');    // true
  hasClass(el,'header');  //  false
  addClass(el, 'foot');   //  "clear btn foot"
  addClass(el, 'header');  // "clear btn foot header"
  removeClass(el,'btn');  //  "clear foot header"
  removeClass(el,'hatt'); //  "clear foot header"

函数isEmail(str)，判断用户输入的是不是邮箱

  function isEmail(str){
    return (/^[a-zA-Z0-9]\w+@\w+\.\w+/.test(str));
  }

函数isPhoneNum(str)，判断用户输入的是不是手机号

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

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

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

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

function isValidPassword(str){
  var i=0;
  if(/^\w{6,20}$/.test(str)){
    if(/[a-z]/.test(str)){
      i++;
    };
    if(/[A-Z]/.test(str)){
      i++
    };
    if(/[0-9]/.test(str)){
      i++
    };
    if(/_/.test(str)){
      i++
    };
    if(i>1){
      return true;
    }else return false;;
  }else return false;
}

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

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

下面代码输出什么? 为什么? 改写代码，让其输出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 = /<!--[\W\w]*?-->/g;
    console.log(str.match(re)) // '<!-- My -- comment \n test -->', '<!---->'

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

找出字符串中有效的标签

    var re = /<[^>]+>/g;
    var str = '<> <a href="/"> <input type="radio" checked> <b>'
    console.log(str.match(re)); // '<a href="/">', '<input type="radio" checked>', '<b>'

最后编辑于：2017.12.03 05:53:02