問答題

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

\d 任何ASCⅡ數字，等價于[0-9]
\w 任何ASCⅡ字符組成的單詞，等價于[_a-zA-Z0-9]
\s 任何Unicode空白符，等價于[\t\n\x0B\f\r]
[a-zA-Z0-9] 小寫26個字母、大寫26個字母、0-9個數字的中的任意一個字符
\b 匹配一個單詞的邊界。注：[\b]匹配的是退格符。
. 除換行符和其他Unicode行終止符之外的任意字符，等價于[^\r\n]
正則表達式中量詞

• 匹配前一項零次或多次（任意次），等價于{0，}

• 匹配前一項一次或多次（至少出現一次），等價于{1，}
  ? 匹配前一項0次或者1次，也就是說前一項是可選的，最多出現一次，等價于{0,1}
  x{3} x重復出現3次
  ^ 匹配字符串的開頭，在多行檢索中，匹配一行的開頭
  $ 匹配字符串的結尾，在多行檢索中，匹配一行的結尾

貪婪模式和非貪婪模式指什么?

在匹配字符時盡可能多地匹配，而且允許后續的正則表達式繼續匹配，稱之為“貪婪模式”。
“非貪婪模式”只須在待匹配的字符后跟隨一個問號即可。

代碼題

1、寫一個函數trim(str)，去除字符串兩邊的空白字符。

var a = " hello hi world  ";
function trim(str){
  var reg = /^\s+|\s+$/g;
  var newStr = "";
  newStr = str.replace(reg,'');
  return newStr;
}

函數trim(str)

2、使用正則實現 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)。
PS:\b指單詞邊界，包括開頭、結尾、空格分隔、中橫行分隔。所以hunger-valley，hunger被認為是一個單詞。
提示: el為dom元素，cls為操作的class， el.className獲取el元素的class。

function hasClass(el,cls){
  var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)','g');
  return reg.test(el.className);
}
function addClass(el,cls){
  if(!hasClass(el,cls)){
        return el.className+' '+cls;
    }
}
function removeClass(el,cls){
  var reg = new RegExp('(\\s|^)' + cls + '(\\b|$)','g');
  if(hasClass(el,cls)){   
      return el.className.replace(reg,'');
    }
}

className

3、寫一個函數isEmail(str)，判斷用戶輸入的是不是郵箱。

function isEmail(str){
  var regEmail =  /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+.)+[A-Za-z0-9]{2,3}$/;
  return regEmail.test(str);
 }

4、寫一個函數isPhoneNum(str)，判斷用戶輸入的是不是手機號。

function isPhoneNum(str){
  var regPhoneNum = /1[3|4|5|7|8|][0-9]{9}/;
  return regPhoneNum.test(str);
}

5、寫一個函數isValidUsername(str)，判斷用戶輸入的是不是合法的用戶名（長度6-20個字符，只能包括字母、數字、下劃線）。

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

6、寫一個函數isValidPassword(str), 判斷用戶輸入的是不是合法密碼（長度6-20個字符，包括大寫字母、小寫字母、數字、下劃線至少兩種）。

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

在線編輯

7、寫一個正則表達式，得到如下字符串里所有的顏色（#121212）。

var re = /*正則...*/
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) // #121212,#AA00ef

var re = /#[0-9a-fA-F]{6}/g

顏色正則

8、下面代碼輸出什么? 為什么? 改寫代碼，讓其輸出hunger, world。

var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat); //[""hunger" , hello "world""]   默認*為貪婪模式，為了盡可能與更多的內容匹配，所以就選擇了兩側也有"的 ,hello "world" 做匹配。

var pat = /"\w+"/g;

9、補全如下正則表達式，輸出字符串中的注釋內容. (可嘗試使用貪婪模式和非貪婪模式兩種方法)。

str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /.. your regexp ../

str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

貪婪模式

var re = /<!--[^>]*-->/g;

非貪婪模式

var re = /<!--[^>]?-->/g;

在線編輯

10、補全如下正則表達式。

var re = /* your regexp */
var str = '<> <a href="/"> <input type="radio" checked> <b>'

str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

var re = /<[^>]+>/g;

在線編輯