创建正则表达式
测试正则表达式 test
正则表达式中的特殊字符
量词符
1. 正则表达式概述
1.1 什么是正则表达式
regular expression 是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。
正则表达通常被用来检索、替换那些某个模式(规则)的文本。
例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等
其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript 正则表达式完成表单验证
1.2 正则表达式的特点
- 灵活性、逻辑性和功能性非常强
- 可以迅速地用极简单的方式达到字符串的控制方式
- 对于刚接触的人来说,比较晦涩难懂
- 实际开发中,一般都是直接赋值写好的正则表达式。但是要求会使用正则表达式并且根据实际情况修改正则表达式。
2. 正则表达式在JavaScript中的使用
2.1 创建正则表达式
在JavaScript 中,可以通过两种方式来创建一个正则表达式
1. 通过调用RegExp 对象的构造函数创建
var regexp = new RegExp(/表达式/);
2. 通过字面量创建
var regexp = /123/;
2.2 测试正则表达式 test
test()正则对象方法,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串
regexObj.test(str)
- regexObj 是写的正则表达式
- str 我们要测试的文本
- 就是检测str 文本是否符合我们写的正则表达式规范
3. 正则表达式中的特殊字符
3.1 正则表达式的组成
一个正则表达式可以由简单的字符构成,比如/abc/,也可以是简单和特殊字符的组合,比如/ab* c/。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^,$,+等
特殊字符非常多,可以参考:
- MDN
- jQuery 手册:正则表达式部分
- 正则测试工具 http://tool.oschina.net/regex
这里我们把元字符划分几类学习。
3.2 边界符
正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符
边界符 | 说明 |
---|---|
^ | 表示匹配行首的文本(以谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
如果^ 和 $ 在一起,表示必须精确匹配
3.3 字符类
表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内
1. 方括号[]
只要加了[],就表示多选一
var rg = /[abc]/; //只要包含 a 或者 b或者c ,都返回true
console.log(rg.test('andy')); //true
console.log(rg.test('baby')); //true
console.log(rg.test('color')); //true
console.log(rg.test('red')); //false
var rg1 = /^[abc]$/; // 三选一:只有a或者b或者c 这三个字母才返回true
console.log(rg1.test('a')); //true
console.log(rg1.test('aa')); //false
2. [-] 方括号内部 范围符-
var reg = /^[a-z]$/; // 26个英文字母中任何一个字符才返回true
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
console.log(reg.test(1));//false
可以进行字符组合:
//字符组合
var reg1 = /^[a-zA-Z0-9_-]$/; // 多选一:26个英文字母(大写和小写都可以)和数字,下划线,段斜杠 中任何一个字符才返回true
//以下均为true
console.log(reg1.test('-'));
console.log(reg1.test('Z'));
console.log(reg1.test('_'));
console.log(reg1.test('b'));
console.log(reg1.test('9'));
3.[^] 方括号内部,表示取反符^
//如果中括号里面有 ^ ,表示取反的意思,ps:不要和边界符 ^ 混淆
var reg2 = /^[^a-zA-Z0-9_-]$/;
//除了最后一个为true,其他均为false
console.log(reg2.test('-'));
console.log(reg2.test('Z'));
console.log(reg2.test('_'));
console.log(reg2.test('b'));
console.log(reg2.test('9'));
console.log(reg2.test('!'));
3.4 量词符
用来设定某个模式出现的次数
// * 相当于 >=0
var reg = /^a*$/;
//以下均为true
console.log(reg.test(''));
console.log(reg.test('aa'));
console.log(reg.test('aaaa'));
// + 相当于 >=1
var reg = /^a+$/;
//第一个为false,其他两个为true
console.log(reg.test(''));
console.log(reg.test('aa'));
console.log(reg.test('aaaa'));
// ? 相当于 0 || 1
var reg = /^a?$/;
//最后一个为false,其他两个为true
console.log(reg.test(''));
console.log(reg.test('a'));
console.log(reg.test('aaaa'));
// {n } 就是重复n次
var reg = /^a{3}$/;
//最后一个为true,其他两个为false
console.log(reg.test(''));
console.log(reg.test('a'));
console.log(reg.test('aaa'));
//{n, } >=3
var reg = /^a{3,}$/;
//第一个为false,其他两个为true
console.log(reg.test('a'));
console.log(reg.test('aaa'));
console.log(reg.test('aaaa'));
// {3,5} >=3 && <=5
var reg = /^a{3,5}$/;
//第2个为true,其他两个为false
console.log(reg.test('a'));
console.log(reg.test('aaa'));
console.log(reg.test('aaaaaa'));