問答
1. \d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分別是什么?
- \d：匹配一個數字字符。等價于[0~9]。
- \w：匹配包括下劃線的任何單詞字符。等價于'[A-Za-z0-9_]'。
- \s：匹配任何空白字符，包括空格、制表符、換頁符等等。等價于[\f\n\r\t\v]。
- [a-zA-Z0-9]：匹配小寫字母a-z，大寫字母A-Z，數字0-9。
- \b：匹配一個單詞邊界，也就是指單詞和空格間的位置。例如，'er\b'可以匹配''never''中的‘er’,但不能匹配“verb”中的'er'。
- .：匹配除“\n”之外的任何單個字符。要匹配包括'\n'在內的任何字符，請使用像'[.\n]'的模式。
-
*：匹配前面的子表達式零次或多次。例如，zo*能匹配“z”以及“zoo”。*等價于{0,}。 - +：匹配前面的子表達式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等價于 {1,}。
- ?：匹配前面的子表達式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等價于 {0,1}。
- x{3}：匹配包含3 個 x 的序列的字符串。
- ^：匹配輸入字符串的開始位置。
- $：匹配輸入字符串的結束位置。
2. 貪婪模式和非貪婪模式指什么?
貪婪模式：量詞符，默認情況下都是最大可能匹配，即匹配直到下一個字符不滿足匹配規則為止，這就是貪婪模式。
非貪婪模式：與貪婪模式相反，讓正則表達式盡可能少的匹配，也就是一旦匹配成功就不再嘗試匹配，這就是非貪婪模式，使用非貪婪模式很簡單，在量詞后面加上“？”即可。
代碼題
1. 寫一個函數trim(str)，去除字符串兩邊的空白字符
<pre>function trim(str){ var patt1 = /^\s+|\s+$/g; return str.replace(patt1,''); }</pre>
輸出結果：
2. 使用實現 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正則
代碼：
<pre>
function hasClass(el,cls){
var reg = new RegExp('(^|\\s)'+cls+'($|\\s)','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+'($|\\s)','g');
if(hasClass(el,cls)){
return el.className.replace(reg,'');
}
}
var test = {
className: "hello my world"
};
console.log(hasClass(test,"my"));
console.log(addClass(test,"hi"));
console.log(removeClass(test,"hello"));
</pre>
輸出結果：
3. 寫一個函數isEmail(str)，判斷用戶輸入的是不是郵箱
代碼：
<pre>
function isEmail(str){
var reg = /^[\w.-]+@{1}[\w-]+.[\w.-]+$/;
return reg.test(str);
}
</pre>
輸出結果：
4. 寫一個函數isPhoneNum(str)，判斷用戶輸入的是不是手機號
<pre>
function isPhoneNumber(str){
var reg =/^1[34578]\d{9}$/;
return reg.test(str);
}
</pre>
輸出結果：
5. 寫一個函數isValidUsername(str)，判斷用戶輸入的是不是合法的用戶名（長度6-20個字符，只能包括字母、數字、下劃線）
<pre>
function isValidUsername(str){
var reg = /^\w{6,20}$/
return reg.test(str)
}
</pre>
輸出結果：
6. 寫一個函數isValidPassword(str), 判斷用戶輸入的是不是合法密碼（長度6-20個字符，只包括大寫字母、小寫字母、數字、下劃線，且至少至少包括兩種）
<pre>
function isValidPassword(str) {
if(/(\d{6,20}$)|([A-Z]{6,20}$)|([a-z]{6,20})|({6,20}$)|(^[a-zA-Z0-9]{0,5}$)/.test(str)) {
alert("Oh,你輸入的密碼不合法!");
return;
}
if(/^\w{6,20}$/.test(str)){
return true;
}
}
</pre>
輸出結果：
7. 寫一個正則表達式，得到如下字符串里所有的顏色（#121212）
<pre>
var re = /正則.../
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) // #121212,#AA00ef
</pre>
代碼：
<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>
輸出結果：
8. 下面代碼輸出什么? 為什么? 改寫代碼，讓其輸出hunger, world
<pre>
var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat);
</pre>
輸出結果：[" "hunger" , hello "world" "]
原因：正則默認采取貪婪模式，所以將hunger跟world之間的hello也匹配上了。
修改后的代碼：
<pre>
var str = 'hello "hunger" , hello "world"';
var pat = /".*?"/g;
str.match(pat);
</pre>
輸出結果：
9. 補全如下正則表達式，輸出字符串中的注釋內容. (可嘗試使用貪婪模式和非貪婪模式兩種方法)
<pre>str = '.. .. .. ' re = /.. your regexp ../ str.match(re) // '', ''</pre>
代碼：
貪婪模式：
<pre>str = '.. .. .. ' re = //g; str.match(re);</pre>
輸出結果：
非貪婪模式：
<pre>str = '.. .. .. ' re = //g; str.match(re);</pre>
輸出結果：
10. 補全如下正則表達式
<pre>`
var re = /* your regexp */
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'
`</pre>
代碼：
<pre>
var re = /<[^>]+>/g;
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re);
</pre>
輸出結果：
本教程版權歸饑人谷和作者所有，轉載須說明來源。
