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、换行、回车)
有趣的是,不同浏览器控制台对换行和回车匹配后的显示效果不一样
- \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>'