任务21-正则表达式

问答

• \d，\w, \s, [a-zA-Z0-9], \b, . , *, +, ?, x{3}, ^$分别是什么?
  答案：
  \d：查找数字。
  \w：查找单词字符(字母，数字，下划线)。
  \s：查找空白字符(空格、tab、换行、回车)。
  [a-zA-Z0-9]：查找任何从小写 a 到大写 Z 及任何0到9的字符数字。
  \b：匹配单词边界。
  .：查找单个字符，除了换行和行结束符。
  *：匹配0个或多个。
  +：匹配1个或多个。
  ?：匹配0个或1个。
  x{3}： 匹配包含 3个 x 的序列的字符串
  ^$:匹配开头结尾，比如^n$匹配任何开头为n结尾为n的字符串
• 贪婪模式和非贪婪模式指什么?
• 贪婪模式：正则引擎尽可能多地重复匹配字符。
• 非贪婪模式：正则引擎尝试用 最小可能的重复次数来进行匹配，尽可能少地匹配字符。

代码题

• 写一个函数trim(str)，去除字符串两边的空白字符
  方法1：
  <pre>

  function trim(str){
  newstr=str.replace(/^\s+|\s+$/g,'')
  return newstr;
  }
  trim(' hahahaga233 ');
  console.log(trim(' hahahaga233 '));
  </pre>
  方法2：
  <pre>
  function trim(str){
  newstr=str.split(/\s+/).join('');
  return newstr;
  }
  trim(' hah a ha ga 233');
  console.log(trim(' hah a ha ga 233 '));
  </pre>

• 使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则ps： 视频里问题纠正

<pre>

//提示: el为dom元素，cls为操作的class， el.className获取el元素class

function addClass(el, cls){
   if(!hasClass(el,cls)){
  return el.className+=(""+cls);
   }
}

// 参考老师的写法，有点不理解：
function hasClass(el, cls) {
var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
return reg.test(el.className);
}

function removeClass(el, cls) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
  tmp = node.className.replace(reg, '').replace(/\s{2,}/g, ' '); //把两个以上的空格替换为一个空格
el.className = trim(tmp);

}

</pre>

• 写一个函数isEmail(str)，判断用户输入的是不是邮箱
  <pre>
  function isEmail(str){
  var patt=/\S+@+\S+|.\S+/;
  return patt.test(str);

  }
  isEmail('haha@qq.com');
  console.log(isEmail('hah-a@qq.com'));
  </pre>

• 写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
  <pre>
  function isPhoneNum(str){
  var patt=/^1[356789]\d{9}$/;
  return patt.test(str);
  }
  isPhoneNum('18265550125');
  console.log(isPhoneNum('18265550125'));
  </pre>

• 写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
  <pre>
  function isValidUsername(str){
  var patt=/^\w{6,20}$/;
  return patt.test(str);
  }
  isValidUsername('22aa_hahahAAAHH');
  console.log(isValidUsername('22aa_hahahAAAHH'));
  </pre>

• 写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）
  <pre>
  function isValidPassword(str){
  if(/^\w{6,20}$/.test(str)){

        if((/^[a-z]$|^[A-Z]$|^[0-9]$|^_$/g).test(str)){
            return false;
        }
      
        return true;
  
  }
  
    else {
        return false;
    }
  

  }
  </pre>

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

<pre>
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
</pre>

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

输出结果及原因：
<pre>
var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat);

//    /".\*"/g; 匹配的内容为"任意个任意字符"，因为*默认为贪婪模式，所以会尽可能多地匹配符合正则的内容，输出结果为：[""hunger" , hello "world""]

</pre>

</pre>
改写方案1：
<pre>
var str = 'hello "hunger" , hello "world"';
var pat = /".*?"/g; //?改为非贪婪模式
str.match(pat);
</pre>

改写方案2：
<pre>
var str = 'hello "hunger" , hello "world"';
var pat=/"[^"]+"/g;
str.match(pat);

</pre>

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

  
  
  

  <pre>
  // 非贪婪模式：
  str = '.. .. .. ';
  re = //g;
  str.match(re) ;
  // 贪婪模式：
  str = '.. .. .. ';
  re = //g;
  str.match(re) ;
  </pre>

• 补全如下正则表达式

<pre>
//贪婪模式：
var re = /<[^>]+>/;
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);
</pre>

.