资源描述
网页特效-事件对象
1 正则表达式
1.1 正则概述
1.1.1 为什么要有正则表达式?
1.1.2 什么是正则表达式?
正则表达式(Regular Expression):用来匹配规律规则的表达式
用途:表单验证、高级搜索、生化科学
正则表达式有一定难度,不要求非常的熟练,现阶段只要能用正则表达式完成表单校验即可,后面的框架课也会涉及到一些,将来需要使用到正则的时候,网上一搜一大堆。
1.2 正则基础
1.2.1 正则表达式的创建和使用
通过构造函数创建
var regExp = new RegExp(/\d/); //digit:数字
正则表达式的字面量(推荐)
var reg = /\d/;//正则表达式字面量
reg.test("1");
/\d/.test("a");//如果仅仅是用一下,可以不给正则取名,直接用。
注://是注释,但是在//里面写内容了,那就是正则
1.2.2 预定义类
.
[^\n\r]
除了换行和回车之外的任意字符
\d
[0-9]
数字字符
\D
[^0-9]
非数字字符
\w
[a-zA-Z0-9_]
单词字符(所有的字母数字和_)
\W
[^a-zA-Z0-9_]
非单词字符
\s
[\f\r\n\t\v]
不可见字符 space
\S
[^\f\r\n\t\v]
可见字符
转义字符
\f 表示换页 form feed
\t 表示水平制表符 table
\v 表示垂直制表符 vertical table
\r,\n,\r\n的区别
在万恶的旧社会,打字机换行(\n newline)之后只会下移一行,需要回到一行的开头(\r return)才能继续打字
老式的操作系统也继承了打字机的这一特性,但用户换行之后一般都是要回到开头的,因此新式的操作系统为了方便将键盘上的Enter键的含义修改为\r\n或者直接将\n的含义改为“移动到下一行的开头”。
补充:
| 表示或 或的优先级最低 可以通过()提升优先级
1.2.3 字符类
简单类:[]
[]表示一个字符的位置,[]里面写这个位置可以出现的字符
console.log(/[abc]/);//匹配a,b,c
负向类:^
^表示该位置不可以出现的字符
console.log(/[^abc]/);//匹配除了a,b,c以外的其他字符
范围类:[a-z] [0-9] [1-3]
console.log(/[a-z]/.test("d"));//小写字母
console.log(/[A-Z]/.test("d"));//大写字母
console.log(/[0-9]/.test("8"));//数字
console.log(/[a-zA-Z0-9]/);//所有的小写字母和大写字母以及数字
【案例:验证密码强度】
1.3 正则进阶
1.3.1 边界
我们前面学习的学习的正则只要有满足的条件的就会返回true,并不能做到精确的匹配。
^表示开头
$表示结尾
console.log(/^chuan/.test("dachuan"));//必须以chuan开头
console.log(/chuan$/.test("chuang"));//必须以chuan结尾
console.log(/^chuan$/.test("chuan"));//精确匹配chuan
//精确匹配chuan,表示必须是这个
console.log(/^chuan$/.test("chuanchuan"));//fasle,引入量词
注意:
1. ^在中括号里面表示负向类,在中括号外面表示开始
2. /^chuan$/表示必须是这个,精确匹配
1.3.2 量词
量词用来控制出现的次数,一般来说量词和边界会一起使用
*:表示能够出现0次或者更多次,x>=0;
console.log(/^a*$/.test("aa"));//可以出现0次或者多次a
console.log(/^a*$/.test(""));//0次也可以
console.log(/^a*$/.test("d"));//false,精确匹配,要么是空,要么是多个a
+:表示能够出现1次或者更多次,x>=1;
console.log(/^a+$/.test("a"));//一次
?:表示能够出现0次或者1次,x = (0|1);
console.log(/^a?$/.test("a"));//一次
console.log(/^a?$/.test(""));//0次
{n}:表示能够出现n次
console.log(/^a{2}$/.test("aa"));//只想要2次
{n,}:表示能够出现n次或者多次
console.log(/^a{2,}$/.test("aa"));//可以出现2次以上
{n,m}:表示能够出现n次到m次
console.log(/^a{2,3}$/);//可以出现2到3次
思考:如果用{}来表示* + ?
1.3.3 括号总结
{}大括号限定出现的次数
console.log(/chuan{2}/.test("chuanchuan"));//false
console.log(/chuan{2}/.test("chuann"));//true
[]表示一个字符的出现位置
console.log(/^[fb]oot$/.test("foot"));//foot或者boot
console.log(/^[fb]oot$/.test("boot"));
()用来提升优先级
console.log(/^(chuan){2}$/.test("chuanchuan"));//匹配chuanchuan
1.3.4 案例练习
talk is cheap show me the code.
-- Linus Torvalds
李纳斯·托沃兹
1. 验证座机
a) 比如010-12345678 0313-1234567
b) 开头是3-4位,首位必须是0
c) 后面7-8位
2. 验证姓名
a) 只能是汉字,并且数字在2-4位之间
b) 汉字范围[\u4e00-\u9fa5] unescape() escape()
3. 验证QQ
a) 5-11位,开头不能是0
4. 验证手机
a) 11位数字
b) 号段 13[0-9] 14[5-7] 15[0-9] 18[0-9]
5. 完成的表单验证
1.4 补充
1.4.1 string.replace方法
var str = " 123AD asadf asadfasf adf ";
1 替换掉字符串中的所有空白
2. 将所有的ad替换成xx
3. 将所有的ad/AD替换成xx
var str = abc,efg,123,abc,123,a
1. 所有的逗号替换成句号
var jsonStr = '[{"name":"张三",score:80},{"name":"张三",score:90},{"name":"张三",score:81}]';
1. 把所有成绩都修改成100分
var str = "“你饿了,调我们的粮进京。你渴了.调我们的水进京。高考了,你特么想尽千方百计不让我们的孩子进京。为什么?!” 我们呼吁:全国一张卷,一个录取线!愿赌服输!最近高考方案闹得沸沸扬扬,其实大家就是要的公平竞争!同样都是孩子,同样的国家,同样的教育!为何不同的待遇?";
1. 把所有,。,.!!??全部替换成.
1.4.2 trim函数的封装
【案例:非空判断】
第 7 页
展开阅读全文