任務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>

.