正则表达式

正则及表单验证

一、正则的概念

(一) 正则表达式是一种特殊的字符串模式，用于匹配一组字符串，就好比用模具做产品，而正则就是这个模具，定义一种规则去匹配符合规则的字符。

二、创建方式

(一) 使用RegExp这个对象，第一个参数就是我们的模式字符串,第二个参数可选，模式修饰符

1. Var 变量名 = new RegExp(“正则表达式”,”标志位”);（）
var reg = new RegExp(“study”,”ig”); //i:表示忽略大小写。g:表示全局匹配。

2. 用常量方式直接声明
var 变量名 = /正则表达式/标志位
var reg = /study/ig;

三、正则表达式

(一) 扩展：测试正则表达式test方法

1. 正则表达式对象名.test(“字符串”):用于检测提供的目标字符串是否包含正则表达式的匹配内容，如果包含返回true,否则返回false

1) Var reg = /study/;
reg.test(“Study”) //false
reg.test(“study”) //true
除了匹配相等以外，还可以匹配更复杂的规则
“good good study,day day up”判断是否包含符合该正则的内容

(二)扩展：测试正则表达式exec方法(争议较大)能将匹配到的内容添加到一个数组中。

1. 正则表达式对象名.exec(“字符串”):用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回null。

1) Var pattern = /box/i;
var str = “This is a Box!”;
alert(pattern.exec(str));

(三) 元字符（三、三、二、三个一）共计11个元字符

1. 三：{}[]()

1) {}:表示括号前面的一个字符（or一组字符）连续出现的次数

{m}：表示括号前面的一个字符只能连续出现m次
{m,}:表示至少出现m次，即m~无限次
{m,n}:表示至少出现m次，最多出现n次，即m~n次

2) []:表示范围

a) [u4e00-u9fa5]:表示中文的范围（16进制中字母大小写不区分）（u表示unicode编码）

b) [^u4e00-u9fa5]:表示非中文

^表示取反。

c) [^a-zA-Z]:表示非字母

d) [^0-9]:表示非数字

e) [^ ]:表示非空格

3) （）：表示组

2. 三：* + ？：表示前面字符连续出现的次数

1) * ：等同于{0,}表示0~无限次↓

*前面的一个或一组字符在字符串中连续出现0至无限次。

2) + ：等同于{1,} 表示1~无限次，至少出现1次↓

+前面的一个字符或一组字符在字符创中连续出现1至无限次。

3) ？：等同于{0，1}表示0~1次，最多可出现1次，可以不出现↓

+前面的一个字符或一组字符在字符创中连续出现0至1次。

3. 二：^ $

1) ^ :定（断）头：表示必须以^后面的一个字符开头

2) $ :定（断）尾：表示必须以$前面的一个字符结尾

如：邮箱验证正则表达式 /^w+@[a-z0-9].[a-z]+$/ 中没有^和$的话 “哈10232321@qq.com呵呵” 、“---asd0232321@qq.com” 也会通过验证。

(四) 三个一： . |

1. . : 表示模糊匹配，一个点可以匹配一个任意字符（在未指定次数的情况下默认一个）

2. |:表示或

3. :表示转义字符（转义字符：把具有特殊含义的符号转成一般字符）

1) d: 表示数字 [0-9]

2) D: 表示非数字[^0-9]

3) w: 表示字母、数字、下划线 [a-zA-Z0-9_]

4) W: 表示非字母、数字、下划线 [^a-zA-Z0-9]

5) s: 表示空白符

6) S: 表示非空白符

(五) 扩展：案例分析

1. var pattern = /(google){4,8}/; 　　//匹配分组里的字符串 4-8 次
var str = 'googlegoogle';
alert(pattern.test(str));    　　//false

2.  var pattern = /(google|baidu|bing)/; 　　//匹配三种其中一种字符串
var str = 'google';
alert(pattern.test(str));    　　//true

3.  var pattern = /goosgle/; 　　//s 可以匹配到空格
var str = 'goo gle';
alert(pattern.test(str));    //true

4.  var pattern = /google/; 　　 // 可以匹配是否到了边界    表示单词边界
var str = 'google';
var str2= 'googleaa googlexx google dsdddd';
alert(pattern.test(str));    //true

5.  var pattern = /gw*gle/;　　 //w*匹配任意多个所有字母数字_
var str = 'google';
alert(pattern.test(str));    //true

6.  var pattern = /googled*/;　　 //d*匹配任意多个数字
var str = 'google444';
alert(pattern.test(str));    //true

7.  var pattern = /D{7,}/; 　　//D{7,}匹配至少 7 个非数字
var str = 'google8';
alert(pattern.test(str));    //false

8.  var pattern = /g[a-zA-Z_]*gle/; 　　//[a-z]*表示任意个 a-z 中的字符
var str = 'google';
alert(pattern.test(str));    true

9.  var pattern = /g[^0-9]*gle/;　　 //[^0-9]*表示任意个非 0-9 的字符
var str = 'google';
alert(pattern.test(str));

10.  var pattern = /[a-z][A-Z]+/;　　 //[A-Z]+表示 A-Z 一次或多次
var str = 'gOOGLE';
alert(pattern.test(str));

11.  var pattern = /g.*gle/; 
var str = 'google'; 
alert(pattern.test(str));

12.  var pattern = /^[a-z]+s[0-9]{4}$/i;
var str = 'google 2012';
alert(pattern.exec(str)); 

13.    var pattern = /^[a-z]+/i; 
var str = 'google 2012';
alert(pattern.exec(str));

14.  var pattern = /^([a-z]+)s([0-9]{4})$/i; 
var str = 'google 2012';
alert(pattern.exec(str)[0]); 　　//[0]是父级，代表整个正则表达式匹配到的内容
alert(pattern.exec(str)[1]);　　//google父级下的第一个子级
alert(pattern.exec(str)[2]);　　 //2012父级下的第二个子级

四、字符串replace()函数

(一) 使用replace替换匹配到的数据

1. var pattern = /Good/ig;
var str = “good good study!,day day up!”;
alert(str.replace(pattern,’hard’));    //将Good替换成了hard

2. var pattern = /(.*)s(.*)/;
var str = 'google baidu';
var result = str.replace(pattern, '$2 $1');   //将两个分组的值替换输出
document.write(result);

3. var pattern = /8(.*)8/;
var str = 'This is 8google8';
var result = str.replace(pattern,'<strong>$1</strong>');  //得到替换的字符串输出
document.write(result);

五、字符串match()函数

(一) 使用match方法获取匹配数组

1. Var pattern = /good/ig; 　　//全局搜索
var str = ‘good good study!,day day up!’;
alert(str.match(pattern)); 
alert(str.match(pattern).length);

2. var pattern = /8(.*)8/; 　　//获取 8..8 之间的任意字符
var str = 'This is 8google8, dd 8ggg8';
alert(str.match(pattern));
alert(RegExp.$1); 　　//得到第一个分组里的字符串内容

六、字符串search()函数

(一) 使用search来查找匹配数据的下标位置

1. var pattern = /good/ig;
var str = ‘good good study!,day day up!’;
alert(str.search(pattern));  //查找到返回位置，否则返回-1

(二)

第二节：应用

一、掌握正则的创建方式

二、掌握正则表达式语言

三、邮政编码检测

四、文件格式检测

五、字符串首尾去空格

六、邮件格式检测

第三节

一、手机号检测

(一) / 1(3|5|7|8|4)[d]{9}/

(二) /1d{10}/

二、身份证检测

/^[1-9]d{5}[1-9]d{3}(0[1-9] |1[0-2])(0[1-9]|(1|2)d|3[01])d{3}(d|x|X)$/

三、日期检测

(一) Xxxx年xx月xx日：/(d{4}|d{2})年(d{1,2})月(d{1,2})日/

2017年3月29日
17年3月29日

(二) 12/25/2016 : (d{1,2})/(d{1,2})/(d{4}|d{2})

(三) 类似"12:59:59"的标准时间: /[d]{1,2}:[d]{1,2}:[d]{1,2}/

(四) 类似"June 6,2014"的日期 : /([a-z]+) ([d]{1,2}),([d]{2,4})/

四、中文检测

(一) /[u4e00-u9fa5]/

五、用户名检测

(一) 用户名由 3-10位的字母下划线和数字组成。不能以数字或下划线开头。只能已字母开头。允许全部是字母。

^[a-zA-z][a-zA-Z0-9_]{2,9}$;
/^[a-z]w{2,9}$/i;

六、字符串过滤(首尾空格)

敏感词过滤案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<textarea name="table1" cols="30" rows="10"></textarea>
<input type="button" value="过滤">
<textarea name="table1" cols="30" rows="10"></textarea>

<script>
    //过滤数字和"大爷"
    var tab1 = document.getElementsByTagName('textarea')[0];
    var tab2 = document.getElementsByTagName('textarea')[1];
    var btn = document.getElementsByTagName('input')[0];

    btn.onclick = function(){
        var str = tab1.value;
        var reg = /d|大爷/g;
        var str1 = str.replace(reg,'**');
       tab2.value = str1;
    }

</script>
</body>
</html>

第四节：应用

一、表单及AJAX的综合应用

第五节：综合应用

一、掌握正则的封装

二、掌握综合表单验证

怕什么真理无穷，进一寸有一寸的欢喜。