任务21

问答

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

\d:表示数字字符；等价于[0-9]
\w:单词字符，数字，下划线；等价于[a-zA-Z0-9_]
\s:空白符；等价于[\t\n\f\x0B\r]
\b:单词边界
.:除了回车和换行外的所有字符；
*:出现0次或多次
+:至少出现一次
?:出现0次或1次
x{3}:出现3次x
^$:表示开始和结尾；

2.贪婪模式和非贪婪模式指什么?

• 贪婪模式 ：贪婪模式在整个表达式匹配成功的提前下，尽可能多的匹配。即，正则表达式一般趋于最大长度匹配。
• 非贪婪模式：在整个表达式匹配成功的前提下，以最少的匹配字符。

代码题

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

function trim(str) {
    var re = /^\s+|\s+$/g;//表示在全局模式下匹配开头的空白字符或结尾的空白字符
    str.replace(re,"");
    return str;
}

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

function hasClass(el,cls){
  var re=new RegExp('\\b'+cls+'\\b','g');
  return re.test(el.className);
}
function addClass(el,cls){
  if(hasClass(el,cls)===false){
    el.className=el.className+" "+cls;
  }
  return el.className;
}
function removeClass(el,cls){
  if(hasClass(el,cls)===true){
    var re=new RegExp('\\b'+cls+'\\b','g');
    el.className = el.className.replace(re,"");
    el.className = el.className.replace(/s{2}/g,"");
    return el.className;
  }

var el = {className:"clearfix float title"};
hasClass(el,'clearfix');    // true
hasClass(el,'header');  //  false
addClass(el, 'btn');   //  "clearfix float title btn" 
addClass(el, 'header');  // "clearfix float title btn header"
removeClass(el,'title');  //  "clearfix float btn header"
removeClass(el,'ct');//  "clearfix float btn header"

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

function isEmail(str){
    reg=/(^\w+)\@(\w+)\.com$/g;
    return reg.test(str);
}

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

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

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

function isValidUsername(str){
    reg=/^\w{6,20}$/;
    return reg.test(str)? "合法":"非法";
}

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

function isValidPassword(str) {
       if (/^[a-zA-Z0-9_]{6,20}$/.test(str)) {
        return true
       }else{
        return "长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种"
       }
 }

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

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

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

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

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

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

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

10.补全如下正则表达式

 //贪婪模式
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>'