正则表达式
2017-02-11 本文已影响0人
周花花啊
概念
1、\d， \w, \s, [a-zA-Z0-9], \b, ., *, +, ?, x{3}, ^$分别是什么?
-
\d查找出字符串中的数字(digit缩写)，\D查找非数字字符；
\d查找数字
\D查找非数字
-
\w查找单词字符(字母、数字、下划线)，\W查找非单词字符；
\w查找单词字符
\W查找非单词字符
-
\s查找空白字符(空格、tab、回车、换行)，\S查找非空白字符；
\s查找空白字符
\S查找非空白字符
-
[a-zA-Z0-9]查找方括号之间的任意一个字符
查找方括号之间任意字符
-
\b匹配单词边界，\B匹配非单词边界；
匹配单词边界
-
.匹配单个任意字符(除了换行和行结束符)；
.匹配单个任意字符
-
n*匹配任何包含0个或多个n的字符串；
*匹配包含0个或多个的字符串
-
n+匹配任何至少包含一个n的字符串；
+匹配至少包含一个的字符串
-
n?匹配0个或者1个n的字符串；
匹配0个或1个n的字符串
-
x{3}匹配包含3个x的序列的字符串；
匹配3个x的序列的字符串
-
n$匹配任何结尾为n的字符串；
结尾和开头
-
^n匹配任何开头为n的字符串；
匹配开头
解惑
2、贪婪模式和非贪婪模式指什么?
-
贪婪模式：一般像{n,m}、*、+、？这些在默认情况下都会尽最大的可能去匹配直到下一个不满足匹配规则为止，通俗讲就是看到想要的，有多少就捡多少，除非再也没有想要的了。；
贪婪模式
-
非贪婪模式：让正则表达式在满足匹配规则条件下尽可能少的匹配，即一旦匹配成功就不再继续往下匹配了，通俗讲就是在可匹配可不匹配的情况下，尽可能少的匹配。在代表次数的符号后面加上？即可实现非贪婪；
非贪婪模式
代码题
1、写一个函数trim(str)，去除字符串两边的空白字符
思路：这题其实不难，想到非空白用\s，去掉可以替换，即可；
-
先去掉左边的空白字符；
去掉左边空白字符
-
再去掉右边的空白字符；
去掉右边空白字符
-
最后将两者结合起来，达到去掉两头空白的目的；
达到目的
- 具体代码如下
var str1 = " hello hunger ";
function trim(str){
var RegExp = /^\s*|\s*$/g;
return str.replace(RegExp, '');
}
trim(str1);
下面可以看到还是基础没打好啊，作用域的问题。
问题1
解决
2、使用正则实现 addClass(el, cls)、hasClass(el, cls)、removeClass(el, cls)。
提示: el为dom元素，cls为操作的class，el.className获取el元素的class。
思路：
//判断原来的class里面有没有和参数相同的class
function hasClass(el,cls){
var reg = newRegExp( '(^|\\s)'+cls+'($|\\s)', 'g'); //这个正则要能检索出前后有空格、开头或者结尾的和参数一样的字符
return reg.test(el.className); //判断元素class里面有没有正则里面的字符串
}
//添加class，没有就添加，有的话就什么也不做
function addClass(el, cls){
if( hasClass(el,cls) ){
return;
}else{
el.className += ' '+cls;
}
}
//删除class,如果有就去掉，没有就什么也不做
function removeClass(el, cls){
var reg = newRegExp( '(^|\\s)'+cls+'($|\\s)', 'g');
if( hasClass(el,cls) ){
el.className = el.className.replace(reg, "");
} else{
return;
}
}
3、写一个函数isEmail(str)，判断用户输入的是不是邮箱
var str1 = "123456789@qq.com";
var Reg = /^[a-zA-Z0-9][\w\.\-]+[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;
Reg .test(str1); //true
测试
function isEmail(str){
var Reg = /^[a-zA-Z0-9][\w\.\-]+[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,}$/;
if( Reg .test(str1) ){
return "OK";
}else{
return "Error";
}
}
isEmail(str1);
测试
4、写一个函数isPhoneNum(str)，判断用户输入的是不是手机号
思路：这题也不难，用正则先做出来；
var str1 = "15779268888";
var Reg = /^1[3578][0-9]{9}$/;
Reg .test(str1 ); //true
实现代码：
function isPhoneNum(str){
var Reg = /^1[3578][0-9]{9}$/;
if( Reg .test(str1) ){
return "OK";
}else{
return "Error";
}
}
isPhoneNum(str1);
测试手机号输入
5、写一个函数isValidUsername(str)，判断用户输入的是不是合法的用户名（长度6-20个字符，只能包括字母、数字、下划线）
var str = "zhouhuahua_0913";
var Reg = /^\w{6,20}$/; //这样写字符串开头不受限制
Reg .test(str); //true
测试
function isValidUsername(str){
var Reg = /^\w{6,20}$/;
if(5<str.length && str.length<21){
if( Reg .test(str) ){
return "OK";
}else{
return "Error";
}
}else{
return "Too long or too short";
}
}
isValidUsername(str1);
测试结果
6、写一个函数isValidPassword(str), 判断用户输入的是不是合法密码（长度6-20个字符，包括大写字母、小写字母、数字、下划线至少两种）
var str = "Hxyf0123456_lofe";
var Reg = /^[a-z][A-Z]\d\_{2,}$/; //大、小写字母，数字，下划线至少两种
Reg .test(str); //true
function isValidPassword(str){
if(6>str.length || str.length>20){
return false;
} //判断长度是否合法
if(/[^a-zA-Z0-9_]/.test(str)){
return false;
} //判断字符类型是否在这四种类型中
if(/(^[a-z]+$)|(^[A-Z]+$)|(^\d+$)|(^_+$)/g.test(str)){
return false;
} //至少两种，等于是只有一种取反
return true;
}
isValidPassword(str1);
测试结果
7、写一个正则表达式，得到如下字符串里所有的颜色（#121212）
var re = /#[a-fA-F0-9]{6}/g;
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) // #121212,#AA00ef
注意：
1、之前在#前面加了^，这样意味着颜色得在字符串的开头位置；
2、没有加g，导致匹配完一个之后就不再继续匹配了；
结果
8、下面代码输出什么? 为什么? 改写代码，让其输出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);
非贪婪模式
9、补全如下正则表达式，输出字符串中的注释内容. (可尝试使用贪婪模式和非贪婪模式两种方法)
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /.. your regexp ../
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
- 非贪婪模式：
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<!--[.\n]*?-->/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 = /* 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>';
str.match(re); // '<a href="/">', '<input type="radio" checked>', '<b>'
贪婪模式结果
- 非贪婪模式
var re = /<[a-z].*?>/g;
var str = '<> <a href="/"> <input type="radio" checked> <b>';
str.match(re); // '<a href="/">', '<input type="radio" checked>', '<b>'
非贪婪模式结果
（完）
