问答
-
\d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?
答:-
\d
查找数字
"32 aa bCD -AD_ +-8/@!".match(/\d/g)//["3","2","8"]
-
\w
查找单词字符(包括英文字母,数字,下划线)
"1234ascddABC_".match(/\w/g);//["1", "2", "3", "4", "a", "s", "c", "d", "d", "A", "B", "C", "_"]
-
\s
查找空白字符(空格、tab、换行、回车)
"a aaa abc".match(/\s/g); //[" ", " "]
-
[a-zA-Z0-9]
查找a-z、A-Z、0-9的字符,和\w相比少了一个下划线,从正则的分类来说,一个属于方括号类型,一个属于元字符类型
"1234ascddABC_".match(/[0-9a-zAZ]/g);//["1", "2", "3", "4", "a", "s", "c", "d", "d", "A"]
-
\b
匹配单词边界(开头、结尾、空格分隔、中横线分隔)
"hello world abc".match(/\bhello/g);//hello "hello world-hello".match(/\bhellb/g)//["hell"]
-
.
匹配单个字符(换行和行结束符除外)
"hello 01\n".match(/./)//["h"]
-
*
匹配零个或者多个前面的字符串(贪婪模式, 尽可能多的取前面字符串)
"abc abbc abbbcc abbbbcde".match(/ab/g);//["ab", "ab", "ab", "ab"] "abc abbc abbbcc abbbbcde".match(/ab*/g);//["ab", "abb", "abbb", "abbbb"]
-
+
匹配一个或多个前面的字符串
"abc abbc abbbcc abbbbcde".match(/ab+/g);//["ab", "abb", "abbb", "abbbb"]
-
?
零或者多个前面的字符串(非贪婪模式, 尽可能少的取前面字符串);
"abc abbc abbbcc abbbbcde".match(/ab/g);//["ab", "ab", "ab", "ab"] "abc abbc abbbcc abbbbcde".match(/ab?/g);//["ab", "ab", "ab", "ab"]
-
x{3}
包含3个x的字符串
"abc abbc abbbcc abbbbcde".match(/abb{3}/g);//["abbbb"]
-
^$
匹配空字符
"abc,abbc,1,A,_,*".match(/^$/g);//null "".match(/^$/g);//[""]
-
-
贪婪模式和非贪婪模式指什么?
贪婪模式:贪婪模式在正则表达式匹配成功的前提下,尽可能多的匹配。
"abbbbbbbb".match(/ab*/g)//["abbbbbbbb"]*代表出现0次或任意次,在匹配到a时其实就已经符合匹配的条件了,但在贪婪模式下它匹配到了它能匹配到符合条件的所有的b。
非贪婪模式:就是匹配到结果就好,就少的匹配字符。
"abbbbbbbb a abc".match(/ab?/g)//["ab", "a", "ab"]?代表出现0次或1次,也就是非贪婪模式,在已经匹配成功后,会尽可能少匹配。
代码
-
写一个函数trim(str),去除字符串两边的空白字符
function time(str){ return str.replace(/^\s+|\s+$/g,""); } var str = " abc def jkljkl "; console.log(time(str));//abc def jkljkl
-
使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls),使用正则
ps: 视频里问题纠正<div id="div1" class="color border"></div> <script type="text/javascript"> var div = document.getElementById("#div1"); 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, "").replace(/\s{2,}/g, "") } } hasClass(div1, "color") //true hasClass(div1, "bg-color") //false addClass(div1, "fontsize") //undefined div1.className //"color border fontsize" removeClass(div1, "color") //undefined div1.className //"border fontsize" </script>
-
写一个函数isEmail(str),判断用户输入的是不是邮箱
function isEmail(str) { var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/; if (reg.test(str)) { return str } else { alert("请输入正确的邮箱格式") } } isEmail("abc") //"请输入正确的邮箱格式" isEmail("97529288@qq.com") //"97529288@qq.com"
-
写一个函数isPhoneNum(str),判断用户输入的是不是手机号
function isPhoneNum(str){ var reg=/^1[0-9]{10}$/; if (reg.test(str)) { return str }else{ alert("请输入正确的手机号") } } var str="13901234567901" isPhoneNum(str)//输出:"请输入正确的手机号" var str="13901234567" isPhoneNum(str)//输出:"13901234567"
-
写一个函数isValidUsername(str),判断用户输入的是不是合法的用户名(长度6-20个字符,只能包括字母、数字、下划线)
function isValidUsername(str){ var reg=/^\w{6,20}$/ if (reg.test(str)) { return str }else{ alert("请输入正确的用户名") } }
-
写一个函数isValidPassword(str), 判断用户输入的是不是合法密码(长度6-20个字符,只包括大写字母、小写字母、数字、下划线,且至少至少包括两种)
function isValidPassword(str){ var reg=/^\w{6,20}$/; var reg1=/(^[a-z]+$)|(^[A-Z]+$)|(^[0-9]+$)|(^_+$)/; if (reg.test(str)) { if(reg1.test(str)){ alert("请输入正确的密码(字母、数字、下划线,至少包含其中两种)") }else{ alert("设置成功"); } }else{ alert("请输入正确的密码(长度6-20)") } }
-
写一个正则表达式,得到如下字符串里所有的颜色(#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 = /#[e-fA0-2]{6}/g; var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "; alert( subj.match(re) ) // #121212,#AA00ef
-
下面代码输出什么? 为什么? 改写代码,让其输出hunger, world.
var str = 'hello "hunger" , hello "world"'; var pat = /".*"/g; str.match(pat);
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""]
-
补全如下正则表达式,输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
str = '.. <!-- My -- comment \n test --> .. <!----> .. ' re = /.. your regexp ../ str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
//贪婪模式 str = '.. <!-- My -- comment \n test --> .. <!----> .. ' re = /<!--[\w\W]*?-->/g str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
//非贪婪模式 str = '.. <!-- My -- comment \n test --> .. <!----> .. ' re = /<!--{FNXX==XXFN}*-->/g str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
-
补全如下正则表达式
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 = /<[a-z][\w\W]*?>/g var str = '<> <a href="/"> <input type="radio" checked> <b>' str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'