正则表达式
本章任务
- 制作严谨的电子邮箱验证页面
- 制作省市级联效果
本章目标
- 使用innerHTML的动态改变DIV的内容
- 使用正则表达式验证页面输入的内容
- 使用数组实现级联的下拉列表框效果
正则表达式
为什么要用正则表达式
- 简洁的代码
- 严谨的验证文本框中的内容
什么是正则表达式
RegExp是正则表达式的缩写。当你检索某个文本时,可以使用一种模式来描述要检索的内容.RegExp就是这种模式。
- 普通模式
- 构造函数模式
简单(普通)模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析,格式检查,替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等。
定义正则表达式
- 普通模式
// var reg=/white/;
var reg=/表达式/附加参数;
- 构造函数
// var reg=new RegExp("表达式","附加参数")
var reg=new RegExp("white"); // 当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 "white"
- 简单模式
var reg=/china/;
var reg=/abc8/;
- 复合模式
var reg=/^\w+$/;
var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
RegExp方法
- 测试()
test()方法检索字符串中的指定值。返回值是true或false
例子
var reg = new RegExp("e");
document.write(reg.test("The is javascript"));
- EXEC()
exec()方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回null。
例子
var reg = new RegExp("e");
document.write(reg.exec("The is javascript"));
- 编译()
compile()方法用于改变RegExp,既可以改变检索模式,也可以添加或删除第二个参数。
例子
var reg=new RegExp("e");
document.write(reg.test("The is javascript"));
reg.compile("d");
document.write(reg.test("The is javascript"));
正则表达式修饰符
修饰符 | 描述 |
---|---|
一世 | 执行对大小写不敏感的匹配。 |
G | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
米 | 执行多行匹配。 |
克使用例子
var str = "hello 123456";
var pattern=/\d/g;
document.write(str.match(pattern));
正则表达式方括号
表达式 | 描述 |
---|---|
[ abc] | 查找方括号之间的任何字符。 |
[[ abc]](http://www.w3school.com.cn/jsref/jsref_regexp_charset_not.asp) | 查找任何不在方括号之间的字符。 |
[0-9] | 查找任何从0至9的数字。 |
[AZ] | 查找任何从小写a到小写z的字符。 |
[AZ] | 查找任何从大写A到大写Z的字符。 |
[AZ] | 查找任何从大写A到小写z的字符。 |
[adgk] | 查找给定集合内的任何字符。 |
[ adgk] | 查找给定集合外的任何字符。 |
(红\ | 蓝色\ |
[]使用例子
var str = "hello 123456 abc";
var pattern = new RegExp(/[abc]/g);
document.write(str.match(pattern));
正则表达式符号
符号 | 描述 |
---|---|
/ ...... / | 代表一个模式的开始和结束 |
^ | 匹配字符串的开始 |
$ | 匹配字符串的结束 |
\ S | 任何空白字符 |
\ S | 任何非空白字符 |
\ d | 匹配一个数字字符,等价于[0-9] |
\ d | 除了数字之外的任何字符,等价于[ 0-9] |
\ W | 匹配一个数字,下划线或字母字符,等价于[A-ZA-Z0-9_] |
\ W | 任何非单字字符,等价于[ a-zA-z0-9_] |
。 | 除了换行符之外的任意字符 |
// 通过\s表达式匹配空白字符
var str = "hello123456 abc";
var pattern = new RegExp(/\s/g);
document.write(pattern.test(str));
// 匹配非空白字符
var str = "hello123456 abc";
var pattern = new RegExp(/\S/g);
document.write(str.match(pattern));
正则表达式符号2
符号 | 描述 |
---|---|
{N} | 匹配前一项ñ次 |
{N,} | 匹配前一项ñ次,或者多次 |
{N,M} | 匹配前一项至少Ñ次,但是不能超过米次 |
* | 匹配前一项0次或多次,等价于{0,} |
+ | 匹配前一项1次或多次,等价于{1,} |
? | 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1} |
\ |
邮箱正则例子
var email = "111111111@qq.com";
var reg = new RegExp(/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/);
console.info(reg.test(email));
常用正则表达式
- 电话号码\ d {3} - \ d {8} | \ d {4} - {7,8}
- 身份证号码 \ {6})(\ d {4})(\ d {2})(\ d {2})(\ d {3})([0-9] | X)$
- 邮箱地址/ \ w + @ \ w +。[a-zA-Z] {2,3}(。[a-zA-Z] {2,3})?$ /
- 手机号码0?(13 | 14 | 15 | 18 | 17)[0-9] {9}
- IP(25 [0-5] | 2 [0-4] \ d | [0-1] \ d {2} | [1-9]?\ d)。(25 [0-5] | 2 [0 -4] \ d | [0-1] \ d {2} | [1-9] \ d)(25 [0-5] | 2 [0-4] \ d | [0-1] \ d {2} |?[1-9] \ d)(25 [0-5] | 2 [0-4] \ d | [0-1] \ d {2} |?[1-9] \ d)
- 邮编号码\ d {6}
- 中文字符[\ u4e00- \ u9fa5]
字符串对象可以使用正则表达式的方法
方法 | 描述 |
---|---|
比赛 | 找到一个或多个正则表达式的匹配 |
搜索 | 检索与正则表达式相匹配的值 |
更换 | 替换与正则表达式匹配的字符串 |
分裂 | 把字符串分割为字符串数组 |
验证邮政编码例子
document.write("425000".match(/^\d{6}$/));
验证手机号码例子
var reg = new RegExp(/0?(13|14|15|18|17)[0-9]{9}/);
document.write(reg.test("13800138000"));
正则表达式应用场景
- 用户名
- 密码
- 电子邮箱
- 手机号码
- 身份证号码
- 生日
- 邮政编码
- 固定电话
作业
自己动手写个验证身份证号码的正则表达式
使用下拉框实现级联效果
####如何使用下拉框来实现现级效果
问题分析
下拉框需要用到HTML中的两个标签,一个是select
,一个是option
,当用户选择省份下拉框是通过平变化事件来改变城市信息。
- 选择对象
- 选择对象
选择对象常用事件方法和属性
类别 | 名称 | 描述 |
---|---|---|
事件 | 平变化 | 当改变选项时调用的事件 |
方法 | 加() | 向下拉列表中添加一个选项 |
属性 | 选项[] | 返回包含下拉列表中的所有选项的一个数组 |
属性 | 的selectedIndex | 设置或返回下拉列表中被选项目的索引号 |
属性 | 长度 | 返回下拉列表中的选项的数目 |
选择对象属性例子
<select onchange="get(this);">
<option>1701班</option>
<option>1702班</option>
<option>1703班</option>
</select>
function get(select) {
console.info("选择了第" + select.selectedIndex + "条");
console.info("总共" + select.length + "条");
}
加()例子
<select id="class" onchange="get(this);">
<option>1701班</option>
<option>1702班</option>
<option>1703班</option>
</select>
<input type="button" value="添加" onclick="addOption();">
function addOption() {
var clazz = document.getElementById("class");
clazz.add(new Option("1704班", 1704));
}
阵列使用
- 创建数组
var 数组名称 = new Array(size);
- 为数组元素赋值
var fruit= new Array("apple", "orange", " peach","bananer");
- 访问数组
var fruit = new Array(4);
fruit [0] = "apple";
fruit [1] = "orange";
fruit [2] = "peach";
fruit [3] = "bananer";
数组的属性和方法
类别 | 名称 | 描述 |
---|---|---|
属性 | 长度 | 设置或返回数组中元素的数目 |
方法 | 加入() | 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔 |
方法 | concat() | 合并两个数组 |
方法 | sort() | 对数组的元素进行排序 |
下拉级联例子
<select id="region" onchange="loadCity(this);">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
var regions = new Array();
regions['湖南省'] = ['长沙市', '岳阳市', '永州市'];
regions['广东省'] = ['深圳市', '广州市', '韶关市', '湛江市'];
// 加载省份
function loadRegion() {
var region = document.getElementById('region');
var j = 0;
for (var i in regions) {
region.add(new Option(i));
}
}
// 加载城市
function loadCity(region) {
var city = document.getElementById('city');
// 清除之前的所有option
city.options.length = 0;
var citys = regions[region.value];
for (var i = 0; i < citys.length; i++) {
city.add(new Option(citys[i]));
}
}