1、 网页特效-事件对象 1 正则表达式 1.1 正则概述 1.1.1 为什么要有正则表达式? 1.1.2 什么是正则表达式? 正则表达式(Regular Expression):用来匹配规律规则的表达式 用途:表单验证、高级搜索、生化科学 正则表达式有一定难度,不要求非常的熟练,现阶段只要能用正则表达式完成表单校验即可,后面的框架课也会涉及到一些,将来需要使用到正则的时候,网上一搜一大堆。 1.2 正则基础 1.2.1 正则表达式的创建和使用
2、通过构造函数创建 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-z
3、A-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或者直接将\
4、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"));//大
5、写字母 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(/^chua
6、n$/.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
7、""));//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次或者多
8、次 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"));
9、//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) 后
10、面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
11、 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 页






