javascript 正则表达式

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

找出字符串中有效的标签

1
2
3

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

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