1. \d，\w, \s, \S, [a-zA-Z0-9], \b, ., *, +, ?, x{3}, ^$分别是什么?
- \d ：匹配数字
"12a aab 3Bc- +_A 4@".match(/\d/g) // ["1", "2", "3", "4"] - \w： 匹配单词字符(字母、数字、下划线)
"12a aab 3Bc- +_A 4@".match(/\w/g) //["1", "2", "a", "a", "a", "b", "3", "B", "c", "_", "A", "4"] - [a-zA-Z0-9]： 匹配26个字母大小写及10个数字。（和 \w 相比，少匹配了一个下划线）
"12a aab 3Bc- +_A 4@".match(/[a-zA-Z0-9]/g) //["1", "2", "a", "a", "a", "b", "3", "B", "c", "A", "4"] - \s： 匹配空白字符(空格、tab、换行、回车)
有趣的是，不同浏览器控制台对换行和回车匹配后的显示效果不一样
谷歌
火狐
IE10
safari
- \S: 匹配非空字符串
(/\S/).test("") //false
(/\S/).test(" ") // false
(/\S/).test("F") //true - \b： 匹配单词边界(开头、结尾、空格分隔、中横线分隔)
"hello world-hell".match(/\bhell/g) // ["hell", "hell"]
"hello world-hell".match(/\bhell\b/g) //["hell"] 只匹配到第二个hell - .：匹配单个字符，除了换行和行结束符
"a3\nBc- _A b1\r".match(/./g) //["a", "3", "B", "c", "-", " ", "_", "A", " ", "b", "1"] - *：匹配零个或多个，等价于{0，}
"aab abb abbb abb b".match(/ab*/g) // ["a", "ab", "abb", "abbb", "abb"] - +：匹配一个或多个 ，等价于{1，}
"aab abb abbb abb b".match(/ab+/g) //["ab", "abb", "abbb", "abb"] - ？：匹配零个或一个（非贪婪模式）
"aab abb abbb abb b".match(/ab?/g) //["a", "ab", "ab", "ab", "ab"] - x{3}：匹配包含3个x的字符串
"aab abb abbb abb b".match(/ab{3}/g) // ["abbb"] -
^$：匹配空字符串（连一个空格也没有的）
"".match(/^$/g) // [""]
" ".match(/^$/g) // null
2.贪婪模式和非贪婪模式指什么?
贪婪模式：尽可能多的匹配
非贪婪模式：尽可能少的匹配
如: + , * 都是贪婪模式，在满足条件的情况下，尽可能多的匹配
"abaabbbabbbb".match(/ab+/g) // ["ab", "abbb", "abbbb"]
? 是非贪婪模式，尽可能少的匹配
"abaabbbabbbb".match(/ab?/g) // ["ab", "a", "ab", "ab"]
代码题
1. 写一个函数trim(str)，去除字符串两边的空白字符
function trim(str){
return str.replace(/^\s*|\s*$/g,"");
}
var str=" abb kdfa kk "
trim(str) //"abb kdfa kk"
2.使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则
<div id="box" class="bg-Color border"></div>
<script type="text/javascript">
var box=document.getElementById("box");
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)){
el.className +=" "+cls;
}
}
function removeClass(el,cls){
if(hasClass(el,cls)){
el.className=el.className.replace(cls,"");
}
}
</script>
3.写一个函数isEmail(str)，判断用户输入的是不是邮箱
function isEmail(str){
if((/^\S+@\S+\.\w+$/).test(str)){
return str;
}
else{return "请输入正确的邮箱格式"}
}
4.写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
function isPhoneNum(str){
if((/^1[0-9]{10}$/).test(str)){
return str;
}
else{return "请输入正确的手机号"}
}
5.写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
function isValidUsername(str){
if((/^\w{6,20}$/).test(str)){
return str;
}
else{return "请输入6-20位的用户名（数字、字母、下划线）"}
}
6.写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，只包括大写字母、小写字母、数字、下划线，且至少至少包括两种）
function isValidPassword(str){
var a=/^\w{6,20}$/;
var b=/(^[A-Z]+$)|(^[a-z]+$)|(^[0-9]+$)|(^_+$)/;
if(a.test(str)){
if(b.test(str)){
return "请输入6-20位密码（字母、数字、下划线，至少包含其中两种）";
}
else {
return "设置成功"
}
}
else{
return "请输入6-20位密码（字母、数字、下划线，至少包含其中两种）"
}
}
7.写一个正则表达式，得到如下字符串里所有的颜色（#121212）
var re = /#[a-zA-Z0-9]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) // #121212,#AA00ef
8.下面代码输出什么? 为什么? 改写代码，让其输出hunger, world
var str = ' hello "hunger" , hello "world" ';
var pat = /".*"/g;
str.match(pat);
输出["hunger" , hello "world"], 首先，. 匹配除换行和行结束符外的任意单个字符，而 *是贪婪模式，在满足条件的情况下，会尽可能多的匹配。
想让其输出hunger, world，只需写成非贪婪模式即可;
var str = ' hello "hunger" , hello "world" ';
var pat = /".*?"/g;
str.match(pat); //["hunger", "world"]
9.补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
非贪婪模式：
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[\w\W]*?-->/g;
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
贪婪模式：
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[^>]*-->/g; // ^出现在中括号的首部是“非”的意思
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
10.补全如下正则表达式
var re = /<[^<]+>/g
var str = '<> <a href="/"> <input type="radio" checked> <b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'
网友评论