问答
\d 数字字符
\w 单词字符，字母、数字下划线
\s 空白符
[a-zA-Z0-9] 字母、数字
\b 单词边界
. 除了回车符和换行符之外的所有字符
* 出现任意次(出现零次或多次)
+ 出现一次或多次（至少出现一次）
? 出现零次或一次（最多出现一次）
x{3} 匹配x出现三次的
^ 以xxx开头
$ 以xxx结尾
贪婪模式和非贪婪模式指什么?
在正则匹配的量词中关于匹配原则的一些问题，比如{3,5}这个量词，要是在句子中出现了十次，那么他是每次匹配三个还是五个，反正3、4、5都满足3～5的条件
量词在默认下是尽可能多的匹配的，也就是大家常说的贪婪模式
'123456789'.match(/\d{3,5}/g); //["12345", "6789"]
既然有贪婪模式，那么肯定会有非贪婪模式，让正则表达式尽可能少的匹配，也就是说一旦成功匹配不再继续尝试，做法很简单，在量词后加上?
即可
'123456789'.match(/\d{3,5}?/g); //["123", "456", "789"]
代码题
1.写一个函数trim(str)，去除字符串两边的空白字符
function trim(str) {
re=/^\s+|\s+$/g;
return str.replace(re, '')
}
var str=trim(' 1231dfwf ');
alert('('+str+')');
2.使用实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls)，使用正则
//提示: el为dom元素，cls为操作的class， el.className获取el元素的class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 50px;
background: yellow;
}
.width {
width: 100px;
}
.height {
height: 100px;
}
.bg {
background: red;
}
</style>
</head>
<body>
<div>
</div>
<script>
function classOperation(el, cls) {
var ele = document.getElementsByTagName(el)[0];
var re = new RegExp("\\b" + cls + "\\b", "g");
var hasClass = function() {
return re.test(ele.className);
}
var addClass = function() {
ele.className += ' ' + cls;
}
var removeClass = function() {
ele.className = (ele.className).replace(re, '');
}
!hasClass() ? addClass() : removeClass();
console.log(ele.className);
}
classOperation('div', 'bg');//bg
classOperation('div', 'height');//bg height
classOperation('div', 'width');//bg height width
classOperation('div', 'width');//bg height
</script>
</body>
</html>
3.写一个函数isEmail(str)，判断用户输入的是不是邮箱
<body>
<input type="text">
<input type="button" value="验证邮箱">
<script>
var oinput = document.getElementsByTagName('input');
oinput[1].onclick = function checkEmail() {
var email = oinput[0].value;
re = /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;
str = re.test(email) ? '验证通过' : '请输入合法邮箱';
alert(str);
}
</script>
</body>
4.写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
<body>
<input type="text">
<input type="button" value="验证手机号">
<script>
var oinput = document.getElementsByTagName('input');
oinput[1].onclick = function checkPhoneNumber() {
var phonenumber = oinput[0].value;
re = /^1[34578]\d{9}$/;
str = re.test(phonenumber) ? '验证通过' : '请输入合法手机号';
alert(str);
}
</script>
</body>
5.写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
<body>
<input type="text">
<input type="button" value="验证用户名">
<script>
var oinput = document.getElementsByTagName('input');
oinput[1].onclick = function isValidUsername() {
var username = oinput[0].value;
re = /w+/;
if (username.length>=6&&username.length<=20) {
str = re.test(username) ? '验证通过' : '用户名只能包括字母、数字、下划线,请删除非法字符';
alert(str);
}
else {
alert("请输入字符长度为6-20的用户名")
}
}
</script>
</body>
6.写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）
<body>
<input type="text">
<input type="button" value="验证用户密码">
<script>
var oinput = document.getElementsByTagName('input');
var arr = [];
oinput[1].onclick = function isValidUsername() {
var username = oinput[0].value;
username = username.split('').sort().join('');
var up = username.match(/[A-Z]/);
var low = username.match(/[a-z]/);
var num = username.match(/[0-9]/);
var botline = username.match(/_/);
arr = [up, low, num, botline];
var newarr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i]) {
newarr.push(arr[i])
}
}
if (username.length >= 6 && username.length <= 20) {
str = newarr.length >= 2 ? '验证通过' : '密码包括大写字母、小写字母、数字、下划线至少两种,请删除非法字符';
alert(str);
} else {
alert("请输入字符长度为6-20的用户密码")
}
console.log(newarr);
}
</script>
</body>
7.写一个正则表达式，得到如下字符串里所有的颜色（#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 = /#\w{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
console.log(subj.match(re)) // #121212,#AA00ef
8.下面代码输出什么? 为什么? 改写代码，让其输出hunger, world.
var str = 'hello "hunger" , hello "world"';var pat = /".*"/g;str.match(pat);
var str = 'hello "hunger" , hello "world"';
var pat = /"[^""]+"/g;
alert(str.match(pat));
9.补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /.. your regexp ../
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[^>]*-->/g;
console.log(str.match(re)) // '<!-- My -- comment \n test -->', '<!---->'
非贪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[^>]*?-->/g;
console.log(str.match(re)) // '<!-- My -- comment \n test -->', '<!---->'
感觉没有什么区别啊,不知道老师是考察的哪个知识点????
10.补全如下正则表达式
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>'
console.log(str.match(re)); // '<a href="/">', '<input type="radio" checked>', '<b>'
网友评论