《JavaScript程序设计案例教程》教案 第11章 正则表达式.docx

PAGE8

PAGE8

PAGE9

PAGE9

课题

正则表达式

课时

4课时（180min）

教学目标

知识目标：

（1） 了解什么是正则表达式

（2）掌握常见正则表达式的应用

（3）掌握正则表达式的语法规则

（4）掌握String类中常用方法的应用

（5）掌握RegExp类中常用方法的应用

能力目标：

（1）掌握正则表达式基本应用能力

（2）创建正则表达式的能力

（3）运用正则表达式相关方法的能力

（4）综合应用正则表达式解决实际问题的能力

素质目标：

（1） 培养利用计算机技术解决实际问题的能力

（2）夯实基础，提高专业水平，心系国家政府网站建设

教学重难点

教学重点：正则表达式的语法规则及相关方法应用，包括掌握字符类别、字符集合、特殊字符、限定字符和修饰符的用法；熟悉String类和RegExp类中与正则表达式相关的方法；并能运用正则表达式实现手机号输入限定及表单验证等实际功能，提升对正则表达式的综合运用能力

教学难点：理解和灵活运用正则表达式的复杂语法规则，如区分不同字符类别、字符集合和特殊字符的含义及用途；掌握限定字符和修饰符的组合使用；以及在综合案例中准确设计正则表达式规则进行表单验证

教学方法

问答法、讨论法、讲授法

教学用具

电脑、投影仪、多媒体课件、教材

教学过程

主要教学内容及步骤

课前任务

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课前任务

请同学们收集一些包含不同类型内容（如数字、字母、特殊符号等）的文本片段，并尝试思考如何使用日常的方法去查找特定的内容，例如，找出文本中的所有数字、找出以特定字母开头的单词等，然后在APP上进行分享。

【学生】完成课前任务

考勤

【教师】使用APP进行签到

【学生】班干部报请假人员及原因

问题导入

【教师】提出以下问题：

同学们在日常的网页开发或者文本处理中，有没有遇到过需要验证用户输入的邮箱格式是否正确、判断一个字符串是否是有效的电话号码的情况呢？如果有，那大家一般是怎么去实现这些功能的呢？

【学生】思考、举手回答

传授新知

【教师】通过学生的回答，引入新知，讲解正则表达式的基本概念、语法规则，以及与正则表达式相关的方法等知识

11.1初识正则表达式

?【教师】扫码播放“初识正则表达式”微课，帮助学生了解正则表达式的概念，正则表达式的基本应用，如何创建正则表达式

11.1.1什么是正则表达式

正则表达式（RegularExpression，常简称RegExp）是一种描述文本结构的语法规则，常用于验证文本是否符合某种规则，可以实现如文本查找、文本替换、文本过滤等高级功能。日常开发中，经常会利用正则表达式实现邮箱格式校验、电话号码匹配、DOM节点查找等功能。

……（详见教材）

?【教师】组织学生阅读“自信中国”的内容（详见教材），并提出问题：

“法信”平台采用的服务模式，用到的技术有哪些？

?【学生】阅读、思考、举手回答

?【教师】总结学生的回答

11.1.2正则表达式的基本应用

了解什么是正则表达式后，接下来学习正则表达式的基本应用。日常开发中，通常需要在一个字符串中查找指定类型的字符，此时可以使用JavaScript中String类型的match()方法进行对应字符串的匹配。此处以在字符串中查找数字为例进行介绍，代码如下：

……（详见教材）

上述代码首先定义了一个字符串变量str，然后定义了变量reg，并赋值一个正则表达式字面量对象“/\d+/”。正则表达式规则由2个“/”包裹，2个“/”之间可以包含各种匹配规则，其中“\d”表示匹配0～9之间的数字，“\d”默认匹配一个数字就结束；而“+”表示可以匹配一个或者多个元素，会尽可能进行更多的字符匹配。接着使用match()方法传入正则表达式规则，然后得到匹配结果result，并在控制台输出result。

变量result为一个数组对象，使用result[0]能获取匹配结果123456。数组中还包含几个对象，其中index表示匹配结果位于字符串中的索引值（从0开始），input表示进行匹配的字符串。

【课堂问答】

?【教师】随机邀请学生回答以下问题：

日常开发中，正则表达式可以实现哪些功能？

?【学生】聆听、思考、回答

?【教师】总结学生的回答

11.1.3创建正则表达式

创建正则表达式可以使用字面量方式，也可以使用RegExp对象构造函数方式。前面用到的正则表达式“/\d+/”就是使用字面量方式创建的。以下为字面量方式的语法规则。

/pattern/flags

以下为RegExp对象构造函数方式的语法规则。

newRegExp(pattern[,flags])

RegExp(pattern[,flags])

在上述