JavaScript巩固与加强（五）正则

JavaScript巩固与加强（五）

目录

JavaScript巩固与加强（五）... 1

一、正则表达式... 3

1、历史起源... 3

2、什么是正则表达式... 3

3、应用场景... 3

4、快速入门... 4

1）查找一个字符串中是否具有数字“8”. 4

2）查找一个字符串中是否具有数字... 4

3）查找一个字符串中是否具有非数字... 4

二、正则对象... 4

1、创建正则对象... 5

2、探讨正则对象从何而来... 5

3、匹配模式... 6

4、使用正则对象... 6

1）RegExp类... 6

2）String类... 6

5、问题... 8

三、几个常用概念... 8

1、子表达式... 8

2、捕获... 9

3、反向引用... 9

4、原理图... 9

5、思考题... 9

6、练习... 10

四、exec方法与子表达式... 11

1、使用exec方法获取数据... 11

2、exec方法与子表达式... 11

五、正则表达式... 12

1、开发小技巧... 12

2、正则表达式构成... 12

3、查什么（元字符——匹配符）... 13

4、查多少（元字符——限定符）... 14

5、从哪查（元字符——定位符）... 15

6、转义符... 15

7、选择匹配符... 16

8、特殊用法... 16

9、结巴程序... 17

六、编写正则工具箱... 19

1、设计html页面... 19

2、编写Javascript代码... 20

七、Javascript作业... 21

1、省市二级联动... 21

2、时钟程序... 21

3、扩充Array与Number系统类... 22

4、贪吃蛇游戏... 23

一、正则表达式

1、历史起源

1956年，美国的两位神经生理方面的科学家研究了一种方法：通过数学符号形式来描述神经元系统。

肯·汤马森（Unix系统之父）：把这种符号引入到Unix系统中的QED编辑器中。

正则表达式本身是一门独立的语言，可以被大多数编程语言所使用，如Javascript、PHP、Java

MySQL：SQL语言

正则表达式：大多数编程语言

2、什么是正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。

精准匹配：

$sql = “select * from goods where title=’联想780’”;

模糊匹配：

$sql = “select * from goods where title like ‘%联想%’”;

3、应用场景

1）信息隐藏 张*三 139*****92

2）信息过滤 上海、政府（sh、zf）

3）信息采集 l8675o28893

4）信息查询 高亮显示

4、快速入门

1）查找一个字符串中是否具有数字“8”

运行结果：true

2）查找一个字符串中是否具有数字

运行结果：true

3）查找一个字符串中是否具有非数字

运行结果：false

二、正则对象

在使用正则表达式之前要有一个前提，必须创建一个正则对象。

1、创建正则对象

1）隐式创建

基本语法：

var 正则对象 = /正则表达式/匹配模式;

2）显示创建（直接实例化）

var 正则对象 = new RegExp(‘正则表达式’,’匹配模式’);

说明：两者在功能上完全一致，都是创建RegExp类的实例（正则对象），唯一区别在于语法不同。

var reg = /\d\d\d/gi;

var reg = new RegExp(‘\\d\\d\\d’,’gi’);

2、探讨正则对象从何而来

通过以上程序证明可知：reg（正则对象）是系统类RegExp实例化而来的。

3、匹配模式

g：（global）全局，全局匹配

i：（ignore）忽略大小写

4、使用正则对象

1）RegExp类

test(str) ：判断字符串是否含有指定模式的字符，返回布尔类型值（true，false）

exec(str) ：获取字符串中指定模式的子串

2）String类

search(reg) ：返回指定模式的字符在字符串出现的位置（默认从0开始）

match(reg) ：以数组形式返回指定模式的子串

replace(reg,’替换后的字符’) ：替换指定模式的字符串

split(reg) ：以指定模式的字符分割字符串，返回数组

例1：使用正则对象6大方法

html代码

Javascript代码

运行效果：

5、问题

以上代码在不添加15行代码时，最后一个输出语句结果为false，原因：

在正则对象中如果使用了匹配模式g（全局匹配），当系统查找到满足条件的结果时，将在当前位置放入一个标记，当下次查询时，系统将自动从标记位置查起，所以最后一个结果为false，在开发过程中如果遇到以上问题，可以通过正则对象.lastIndex = 0的形式，人为置空标记为0，代表下次查询将从开始位置查起。

三、几个常用概念

1、子表达式

在正则表达式中，通过一对圆括号括起来的内容，我们就称之为子表达式

var str = ‘adsfasdfas1234dfasdfasdfasdfasdfasdf’;

var reg = /\d(\d)\d\d\/gi;

2、捕获

在运行过程中，子表达式所匹配到的内容会被系统所捕获，并放入系统的缓冲区中

3、反向引用

在正则表达式可以通过\n（n大于等于1）来引入缓存区中的内容

4、原理图

5、思考题

l 查找连续的四个数字，如：3569

答：var reg = /\d\d\d\d/gi;

l 查找连续的相同的四个数字，如：1111

答：var reg = /(\d)\1\1\1/gi;

l 查找数字，如：1221,3443

答：var reg = /(\d)(\d)\2\1/gi;

l 查找字符，如：AABB,TTMM

\w：代表字符

答：var reg = /(\w)\1(\w)\2/gi;

l 查找连续相同的四个数字或四个字符

答：var reg = /(\w)\1\1\1/gi;

6、练习

var str = ‘asdfaskd<h1>Hello</h1>faswerw<div>RegExp</div>er23234asdfasdfasdf’;

通过正则表达式获取字符串中的所有HTML代码

Hello

RegExp

运行效果：

四、exec方法与子表达式

1、使用exec方法获取数据

运行结果：

2、exec方法与子表达式

运行结果：

说明：当exec遇到了子表达式：

第一次运行时，生成结果会自动转化为数组类型，

数组中的第0个元素就是我们匹配的最终结果 row[0]=123;

数组中的第1个元素就是我们子表达式所匹配的结果row[1]=23

…

第二次运行时，生成结果会自动转化为数组类型

数组中的第0个元素就是我们匹配的最终结果 row[0]=456

数组中的第1个元素及时我们子表达式所匹配的结果row[1] = 56

…

第三次运行时，依次类推

…

五、正则表达式

1、开发小技巧

① 确定我们需要查什么

② 确定我们需要查多少

③ 确定我们从哪查

2、正则表达式构成

正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

① 普通字符

② 特殊字符（元字符）\d \w

3、查什么（元字符——匹配符）

字符匹配符用于匹配某个或某些字符

在正则表达式中，通过一对方括号括起来的内容，我们称之为“字符簇”

[a-z] 匹配小写字母a-z中的任一字符

[A-Z] 匹配大写字母A-Z中的任一字符

[0-9] 匹配数字从0-9中的任一数字

[0-9a-z] 匹配数字0-9或小写a-z中的任一字符

[0-9a-zA-Z] 匹配数字0-9或字母a-z中的任一字符

[abcd] 匹配字母abcd中的任一字符

[1234] 匹配数字1234中的任一数字

在字符簇中，^代表取反的含义

[^a-z] 匹配除a-z以外的任一字符

[^0-9] 匹配除0-9以外的任一字符

[^abcd] 匹配除字母abcd以外的任一字符

\d ：匹配一个数字字符 [0-9]

\D ：匹配一个非数字字符 [^\d]

\w ：匹配包括下划线的任何单词字符 [0-9a-zA-Z_]

\W ：匹配任何非单词字符 [^\w]

\s ：匹配任何空白字符 制表符、空格、回车

\S ：匹配任何非空白字符 [^\s]

. ：匹配除 "\n" 之外的任何单个字符

示例代码：

4、查多少（元字符——限定符）

限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。

* 匹配前面的子表达式零次或多次 0到多 {0, }

+ 匹配前面的子表达式一次或多次 1到多 {1,}

? 匹配前面的子表达式零次或一次 0或1 {0,1}

{n} 匹配确定的 n 次

{n,} 至少匹配n 次

{n,m} 最少匹配 n 次且最多匹配 m 次

示例代码：

贪婪匹配原则：

在正则表达式中，我们把能匹配多的就不匹配少的这种情况就称之为“贪婪匹配”，默认正则表达式采用的就是贪婪匹配原则。

非贪婪匹配原则：

在正则表达中，可以通过？问号把一个正则表达式由贪婪匹配转化为“非贪婪匹配”

5、从哪查（元字符——定位符）

定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^ 匹配输入字符串的开始位置

$ 匹配输入字符串的结束位置

\b 匹配一个单词边界

\B 匹配非单词边界

例1：通过正则表达式匹配11位手机号码

例2：单词边界与非单词边界

6、转义符

在Javascript代码中，可以通过反斜杠\对特殊字符进行转义

* + ？ [ ] { } ( ) . / ^ $

7、选择匹配符

| 可以匹配多个规则

8、特殊用法

(?=) ：正向预查

(?!) ：负向预查

(?:) ：输出结果但不捕获

9、结巴程序

我...我是是..一个个...帅帅帅帅...哥!

通过正则表达式进行转化到如下语句：

我是一个帅哥！

1）第一步：过滤掉所有的.点号

运行结果：

2）去重，过滤掉所有重复内容，只保留一个

在replace方法中，第二个参数有一种特殊用法，$n（n大于等于1的正整数）可以直接引用系统缓存区的内容。

六、编写正则工具箱

1、设计html页面

运行结果：

2、编写Javascript代码

运行效果

七、Javascript作业

1、省市二级联动

代码参考zuoye01.html

运行效果：

2、时钟程序

运行效果：

3、扩充Array与Number系统类

var arr = [10,20,30,40,50];

arr.find(30); //2

var i=10;

i.sum(20,30,40,50); //150

4、贪吃蛇游戏