《JavaScript前端开发案例教程》
教学设计
课程名称：JavaScript前端开发案例教程       
授课年级：      年级           
授课学期：      学年第一学期   
教师姓名：  某某老师           
年  月  日
课题
名称
第9章 正则表达式
计划
学时
6学时
内容
分析
项目开发中，经常需要对表单中输入内容的文本框进行格式限制。例如，用户名、密码、手机号、身份证号的验证，这些内容遵循的规则繁多而又复杂，如果要成功匹配，可能需要进行多次的条件判断，这种做法显然不可取。此时，就需要使用正则表达式，利用最简短的描述语法完成诸如查、匹配、替换等功能。本章将围绕如何在JavaScript中使用正则表达式进行详细讲解。
教学目
标及基
本要求
1.了解什么是正则表达式
2.掌握正则表达式的语法
3.掌握正则表达式的应用
教学
重点
字符类别、字符集合、字符限定、括号字符
教学
难点
字符类别、括号字符、正则运算符优先级
教学
方式
教学采用教师课堂讲授为主
●概念性知识点：提出为什么，将抽象具体化，配合教学PPT、图例辅助讲解。
●功能性知识点：提需求，并上机演示如何应用，重点内容总结运行原理。
●综合实战操作：分析整体的设计思路和步骤，对具体操作进行上机演练。
教
学
过
程
第一学时
（什么是正则表达式、如何使用正则表达式、获取正则表达式对象）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）思考一下如何验证用户提交的用户名、email地址等是否符合要求。
●项目开发中的验证内容遵循的规则繁多有复杂，如果仅仅通过普通代码的判断可能需要上百行代码，这在开发中是不可取的。
●正则表达式可以利用最简短的描述语法就能完成相应功能的实现。
（3）明确学习方向。
了解什么是正则表达式，正则表达式的作用。
熟悉正则表达式的基本语法。
掌握如何在JavaScript中使用正则表达式。
二、知识讲解
1.什么是正则表达式
●一种语法规则，可以对字符串进行处理。
2.正则表达式的基本功能
●特征验证：验证各种字符串是否匹配这个特征。
●文本查：在一段文本中查符合特征的字符串。
●文本替换：将正则表达式匹配到的内容替换成指定内容。
●文本截取：在一段文本中将开头和结尾符合某个特征的字符串截取出来。
3.常见应用
●表单验证，验证输入内容的格式是否符合要求。
●手机号码指定位数的隐藏。
●数据采集。
●敏感词过滤。
●关键词搜索。
●文本智能替换。
●在操作系统和许多编程软件的使用中都会遇到正则表达式。正则表达式获取括号内容
4.语法形式
●了解正则表达式的两种形式POSIX和Perl。
●学习JavaScript主要掌握的是Perl正则表达式。
5.正则表达式的使用——exec()方法演示
●使用变量str保存待匹配的字符串“AbC123abc456”。
●利用正则表达式匹配出字符串中的abc。
●查看exec()方法返回的匹配结果。
●讲解正则表达式的基本组成，包括定界符“/”和模式文本。
6.正则表达式的使用——exec()方法演示
●使用变量str保存待匹配的字符串。
●查看match()方法返回的匹配结果。
●演示在正则表达式中使用“^”或“$”匹配位置。
●演示全局匹配“g”。
7.获取正则表达式对象
●讲解创建正则表达式对象的两种方式，字面量和构造函数方式。
●区分元字符和特殊含义字符。
●在正则表达式中使用转义字符。
●注意字符串转义与正则表达式的双重转义问题。
三、知识巩固
  （1）回顾上课前的学习目标，对本节课知识点进行总结。
  （2）使用博学谷系统下发课后作业。
第二学时
（字符类别、字符集合、案例：限定输入内容）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
上节课简单认识了正则表达式的基本语法和使用方法，本节将对正则表达式的具体使用进行详细讲解。
（3）明确学习方向。
掌握字符类别的使用。
掌握字符结合的使用。
掌握“限定输入内容”案例的开发。
二、知识讲解
1.字符类别
●讲解字符类别的作用。
●列举常用的字符类别。
●通过代码演示字符类别的使用。
●注意“.”和“\s”在匹配空白字符时的区别。
2.字符集合
●讲解字符集合的作用。
●列举常用的字符集合。
●注意“^”在字符集合内与字符集合外的区别。
●注意连字符“-”的使用细节，遵循字符编码的顺序。
●演示合法字符范围与不合法字符范围，顺序不能颠倒。
三、【案例】限定输入内容
1.案例分析
●准备一个网页，通过两个文本框提供年份、月份的输入。
●利用JavaScript在表单提交或文本框失去焦点时，对数据进行验证。
2.编写代码
●利用正则表达式分别对年份、月份进行验证。
●为页面中的元素添加事件。
●自动过滤前后空白字符。
四、知识巩固
  （1）回顾上课前的学习目标，对本节课知识点进行总结。
  （2）使用博学谷系统下发课后作业。
第三学时
（字符限定、括号字符、正则运算符优先级、案例：内容查与替换）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
掌握限定符的使用。
掌握贪婪匹配与惰性匹配的实现。
掌握括号字符的使用。
掌握捕获与非捕获的实现。
掌握反向引用的实现。
掌握正则表达式运算符的优先级。
二、知识讲解
1.括号字符
●作用：改变限定符的作用范围，和分组。
●通过代码演示改变作用范围前后的匹配结果差别。
●通过代码演示分组前后的差别。
2.捕获与非捕获
●通过match()方法演示子表达式的捕获结果。
●通过replace()方法实现将子模式的匹配结果替换。
●若不需要捕获子模式的匹配结果，可以使用非捕获匹配。
●通过代码演示非捕获匹配。
3.反向引用
●讲解什么情况下需要用到反向引用。
●讲解反向引用的基本语法。
4.零宽断言
●讲解正向预查和反向预查的实现。
●通过代码进行演示。
5.正则表达式运算符的优先级
●类似JavaScript中的运算符存在优先级，正则表达式也存在运算符优先级。
●列举常用运算符，划分优先级的高低。
●通过代码演示多个运算符同时使用时，优先级遵循的先后顺序。
三、【案例】内容查与替换
1.案例展示
●分析案例的实现效果，对用户输入的内容进行过滤。
●利用正则表达式，将搜索到的文本，替换为“*”。
2.代码实现
●编写HTML页面，在页面中提供两个文本域和一个按钮。
●为按钮添加单击事件。
●在单击事件中，利用正则表达式匹配敏感词。
●获取第1个文本域输入的文本。
●通过字符串的replace()方法实现替换。
●将替换结果保存到第2个文本框中。
四、知识巩固
  （1）回顾上课前的学习目标，对本节课知识点进行总结。
  （2）使用博学谷系统下发课后作业。
第四学时
（与正则表达式相关的方法、动手实践：表单验证）
一、回顾上节课内容
（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。
（2）回顾上节课内容，引出本节课主题。
（3）明确学习方向。
掌握RegExp提供的一些相关方法。
掌握String提供的一些可以用正则表达式的方法。
二、知识讲解
1.RegExp相关方法
●前面已经用过了exec()方法。
●还有一个常用的test()方法，用来检测是否匹配。
●讲解RegExp对象的一些属性，通过代码演示这些属性的使用。
2.String相关方法
●前面已经用过了match()和replace()方法。
●还有search()和split()方法也可以用正则表达式进行操作。
●演示利用search()方法进行正则表达式查。
●演示利用split()方法进行正则表达式分隔字符串。
●在进行split()分割时，可以指定分隔的次数。
三、【动手实践】表单验证
1.案例展示
●演示案例完成后的效果。
●介绍表单验证的规则，用户名、密码、手机号、的具体格式要求。
2.代码实现
●编写HTML页面，准备一个用户注册的表单。
●为每个文本框添加事件，在失去焦点后自动进行表单验证。
●分析每种格式的验证规则，编写正则表达式。
●在表单验证完成后，将验证结果显示在页面中。
●通过浏览器打开页面进行测试。
四、知识巩固
  （1）回顾上课前的学习目标，对本节课知识点进行总结。
  （2）使用博学谷系统下发课后作业。
第五学时
（上机练习）
教师发放本章相关资料和素材，学生进行上机练习，以此检查学生对相关知识点的掌握情况。上机练习完成后将报告通过平台提交给老师。
教
学
后
记

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。