问答
\d，\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分别是什么?
| 可能的值 | 代表 |
|---|---|
\d |
代表数字字符 |
\w |
代表单词字符，字母，数字，下划线 |
\s |
代表空白符 |
[a-zA-Z0-9] |
代表字母，数字 |
\b |
代表单词边界 |
. |
代表任意字符 |
* |
代表匹配0次或多次 |
+ |
代表匹配1次或多次 |
? |
代表匹配零次或1次 |
x{3} |
匹配x三次 |
^ |
代表开头 |
$ |
代表结束 |
贪婪模式和非贪婪模式指什么?
在涉及到量词时，贪婪模式会将符合正则这一位的所有字符都匹配到，然后再从后往前进行查询正则的下一位。
在非贪婪模式下，每有一个符合正则的字符串的值，下一位先判断是否符合正则的下一位，否则再判断是否符合当前的正则位。
在有量词{3，10}时，假设符合条件的可以有10次，处于贪婪模式，会把这符合条件的10次都匹配到；而处于非贪婪模式下，只要匹配到3次，这次匹配就结束，后面的字符重新开始匹配。
匹配默认采用的是贪婪模式，想要设置为非贪婪，要再量词后面加?即可.
'123456789'.match(/\d{3,5}/g); //["12345", "6789"]
'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]
代码题
写一个函数trim(str)，去除字符串两边的空白字符
function trim(str){
return str.match(/[\S]+(\s+\S+)*/g)[0];
}
trim(' asdfas df asdfa ')\\"asdfas df asdfa"
使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box1{
background:#eee;
}
.container{
width:900px;
margin:0 auto;
}
</style>
</head>
<body>
<div id="box" class="box1 container">
<span>lahhahah</span>
</div>
<script>
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 = el.className + ' ' + cls;
}
return el.className;
}
function removeClass(el, cls){
if(hasClass(el, cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
el.className = el.className.replace(reg, '');
}
return el.className;
}
</script>
</body>
</html>
写一个函数isEmail(str)，判断用户输入的是不是邮箱
function isEmail(str){
return str.match(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/);
}
判断邮箱正则
写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
function isPhoneNum(str){
return str.match(/^((\+86)|(86))?1[3-9]\d{9}$/);
}
正则判断手机号
写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
function isValidUsername(str){
return str.match(/^[a-zA-Z]\w{5,19}$/);
}
合法用户名
写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）
function isValidPassword(str){
if (str.match(/^\w{6,20}$/)){
if(str.match(/^[A-Z]*$/)) return false;
if(str.match(/^[a-z]*$/)) return false;
if(str.match(/^[0-9]*$/)) return false;
if(str.match(/^[_]*$/)) return false;
return str;
} else return false;
}
写一个正则表达式，得到如下字符串里所有的颜色
var re = /(#[a-fA-F0-9]{6})|(#[a-fA-F0-9]{3})/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2";
subj.match(re);// ["#121212", "#AA00ef", "#fdd", "#fd2"]
下面代码输出什么? 为什么? 改写代码，让其输出hunger, world.
var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat); //"hunger" , hello "world"
- 因为贪婪模式的影响，所有属于‘.’的字符都会被匹配到，然后往回匹配
‘ " ’
贪婪模式
var str = 'hello "hunger" , hello "world"';
var pat = /".*?"/g;
str.match(pat); //"hunger", "world"
- 在非贪婪模式下，从左向右匹配‘
"’，当碰到自左方向符合.,且当前为"的时候，就取出该字符串。
非贪婪模式
补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
str = '.. <!-- My -- comment \n test --> .. <!----> .. ';
re = /<!--[^]*?-->/g;//非贪婪
str.match(re); // '<!-- My -- comment \n test -->', '<!---->'
str = '.. <!-- My -- comment \n test --> .. <!----> .. ';
re = /<!--[^>]*-->/g;//贪婪
str.match(re); // '<!-- My -- comment \n test -->', '<!---->'
贪婪模式运行
- 贪婪模式匹配到一个
>即会停下，回溯匹配，第一个-没成功，下一个-成功匹配了-->，匹配结束，取出字符串。
补全如下正则表达式
var re1 = /<[^>]+>/g;
var re2 = /<[\s\w'"=\/]+?>/g;
var str = '<> <a href="/"> <input type="radio" checked> <b>';
str.match(re2); // '<a href="/">', '<input type="radio" checked>', '<b>'
本教程版权归 张宇 及 饥人谷 所有，转载请注明出处~
