问答
一、\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?
-
\d：匹配数字字符，等价于[0-9]，（digit数字缩写）
Paste_Image.png -
\w：匹配单词字符，字母、数字下划线，等价于[a-zA-Z_0-9]，（word缩写）
Paste_Image.png -
\s：匹配空白字符（空格 回车 tab 换行）（space缩写）
Paste_Image.png -
[a-zA-Z0-9]匹配a到z，A到Z，0到9之间的任意字符
Paste_Image.png -
\b匹配单词边界（boundary缩写）
Paste_Image.png -
“.”匹配单个字符，除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的所有字符。
Paste_Image.png -
“*”出现零次或多次（任意次）
Paste_Image.png -
+出现一次或多次（至少出现一次）
Paste_Image.png -
?出现零次或一次（最多出现一次）
Paste_Image.png
Paste_Image.png
-
x{3}：匹配x出现三次
Paste_Image.png -
^：以...开头；在[ ]中是类的取反，比如[^abc]表示取不包含abc中的任意一个字符串
Paste_Image.png
Paste_Image.png
-
$：以...结尾
Paste_Image.png
二、贪婪模式和非贪婪模式指什么?
1.贪婪模式是尽可能多的匹配，即匹配直到下一个字符不满足匹配规则为止。{n,m}、+、*在默认情况下都是贪婪模式。
'123456789'.match(/\d{3,5}/g); //["12345", "6789"]
2.非贪婪模式是尽可能少的匹配，即一旦条件满足，就不再往下匹配。在末尾加上?代表非贪婪模式。
'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]
Paste_Image.png
代码题
一、写一个函数trim(str)，去除字符串两边的空白字符
方法一：
function trim(str){
return str.replace(/^\s+|\s+$/g,"");
};
trim(" hello world ");
Paste_Image.png
方法二：
function trim(str){
return str.match(/\S+.+\S/);
}
trim(" hello world ");
Paste_Image.png
二、用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则
function hasClass(el, cls){ 注意：(\\s|^)和(\\s|$)表示左边是开头或者空格,右边是结尾或者空格
var reg = new RegExp('(\\s|^)'+ cls +'(\\s|$)','g');
return reg.test(el.className)
}
function addClass(el,cls){
if(!reg.test(el.className)){
return el.className+" "+cls;
}
function removeClass(el,cls){
if(reg.test(el.className)){
return el.className.replace(cls,"");
}
}
var el={
className:"hello jirengu"
}
Paste_Image.png
三、写一个函数isEmail(str)，判断用户输入的是不是邮箱
function isEmail(str){
var reg = /^[\w\.-]+@{1}[\w-]+\.[\w\.-]+$/;
return reg.test(str);
}
Paste_Image.png
四、写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
function isPhoneNum(str){
return /^1[3-8](\d){9}$/.test(str)
}
Paste_Image.png
五、写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
function isValidUsername(str){
return /^\w{6,20}$/.test(str);
}
Paste_Image.png
六、写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）
function isValidPassword(str){
if(/^\S{6,20}$/.test(str)){
if(/^[a-z]*$|^[A-Z]*$|^\d*$|^\_*$/.test(str)){
return '不合法密码';
}else{
return '合法密码';
};
}
else{
return false;
};
}
方法二：
function isValidPassword(str){
var reg = new RegExp ( '^\\S{6,20}$' ); //注意此处不能写成\w,否则无法通过第一个测试样例
if(reg.test(str)){
var count = 0;
if(/\d/.test(str)){count++;}
if(/[A-Z]/.test(str)){count++;}
if(/[a-z]/.test(str)){count++;}
if(/[_]/.test(str)){count++;}
}
if(count>1){return true;}
else{return false;}
}
isValidPassword("hello'11111'");// true
isValidPassword("'0123'0123"); // false
isValidPassword("AAAaaa"); //true
七、写一个正则表达式，得到如下字符串里所有的颜色（#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=/#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}/gi
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
console.log( subj.match(re) )
Paste_Image.png
八、下面代码输出什么? 为什么? 改写代码，让其输出hunger, world
var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat);
输出结果：
Paste_Image.png
因为：首先开始匹配“符号，然后到了“.”符号，它是除了回车符和换行符之外的所有单个字符，这里它可以匹配引号，空格，“”符号是代表0个或多个，它默认是贪婪模式，所以“.”匹配到不能匹配为止，也就是匹配到hunger” , hello “world”。然后正则表达式里面还要匹配“符号，所有要回溯，刚好当前的位置就是”符号。
可以通过加上?变为非贪婪模式
var pat = /".*?"/g;
var c = str.match(pat);
for (var i in c){
c[i] = c[i].replace(/["]/g,''); // 去掉字符串的双引号
}
console.log(c);
Paste_Image.png
如果要用贪婪模式，还可以这样
var pat = /["]\w*["]/g;
var c = str.match(pat);
for (var i in c){
c[i] = c[i].replace(/["]/g,''); //去掉字符串的双引号
}
console.log(c);
Paste_Image.png
九、补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /.. your regexp ../
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[^>]*-->/g;
str.match(re);
打印结果：
Paste_Image.png
非贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[\W\w]*?-->/g;
str.match(re);
打印结果：
Paste_Image.png
十、补全如下正则表达式
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
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re);
打印结果：
Paste_Image.png
非贪婪模式
var re = /<[^>]+?>/g;
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re);
打印结果：
Paste_Image.png
