章节索引 :

JavaScript RegExp

RegExp 构造函数创建了一个正则表达式对象,用于将文本与一个模式匹配。

RegExp 的实例用于生成一个正则表达式,利用正则表达式从字符串中匹配想要的内容。

正则表达式不是 JavaScript 的一个子内容,也并非 JavaScript 独有,需要学习正则表达式可以查阅相对应的文献。

1. 创建实例

创建一个 RegExp 实例,只需要将其当作构造函数使用:

var regexp = new RegExp(/^a*$/);

regexp.test('aaaa'); // true
regexp.test('a'); // true
regexp.test('a1'); // false

上面这个例子创建了一个规则为从开头到结尾必须是任意个a正则表达式。

注意上面的例子中实际上是把一个正则表达式字面量作为参数传递给了 RegExp 构造函数。

test 方法可以用来校验某个字符串能否使用这个正则表达式匹配到目标。

如果不想传递字面量,也可以传递一个正则表达式字符串,这个时候不需要使用 / 包裹,而字面量是需要 / 包裹的。

var regexp = new RegExp('^a*$'); // 不需要使用 / 将表达式包裹起来

regexp.test('aaaa'); // true
regexp.test('a'); // true
regexp.test('a1'); // false

这样创建出来的和传递正则表达式字面量的效果一样。

传递字符串的时候还能传递第二个参数,作为正则表达式的符号,部分文献也称其为描述符。

var regexp1 = new RegExp('^a*$', 'i');
var regexp2 = new RegExp('^a*$');

var str = 'AAAAA';

console.log(regexp1.test(str)); // 输出:true
console.log(regexp2.test(str)); // 输出:false

符号 i 表示忽略大小写,所以 regexp2 无法在 str 中匹配到值。

如果需要多个符号,则将多个符号放在一起作为字符串即可。

var regexp = new RegExp('^a*$', 'igm');

2. 字面量

通常构造函数会在不确定表达式的内容情况下使用,预定义好的正则表达式通常都会用字面量来表示。

正则表达式的字面量使用一对 / 进行包裹。

var regexp = /^a&/;

这里不需要引号进行包裹,使用引号就变成了字符串。

如果需要加入符号,则跟在末尾即可。

var regexp1 = /^a*$/g;
var regexp2 = /^a*$/ig;

3. 符号

在 ES6 之前,有三种符号。

  • g 全局匹配,找到所有匹配,而不是在第一个匹配后停止
var regexp1 = /a/g;
var regexp2 = /a/;

var str = 'abcdeabcde';

console.log(str.match(regexp1)); // 匹配到两个 a
console.log(str.match(regexp2)); // 只匹配到一个,并返回相应信息

可以看到,regexp1 能匹配到两个 a。

  • i 忽略大小写
var regexp1 = /apple/i;
var regexp2 = /apple/;

var str = 'AN APPLE A DAY KEEPS THE DOCTOR AWAY.';

console.log(str.match(regexp1)); // 可以找到一个
console.log(str.match(regexp2)); // 找不到 输出:null

regexp2没有忽略大小写,所以是无法匹配到 apple 的。

  • m 多行匹配

多行匹配模式下,开头和末尾就不是整个字符串的开头和末尾了,而是一行的开头和末尾。

目前 ES6 提供了三种新的描述符,分别为 u(Unicode 模式),y(粘连模式),s(dotAll 模式)。

4. 常用的正则表达式汇总

正则表达式不一定通用,可能需要结合业务的实际场景来做调整。

4.1 URL

/(http[s]?:\/\/)?[^\s(["<,>]*\.[^\s[",><]*/

4.2 纯数字

/^[0-9]*$/

4.3 邮箱

/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/

4.4 中文与全角符号

/[\u3000-\u301e\ufe10-\ufe19\ufe30-\ufe44\ufe50-\ufe6b\uff01-\uffee]/

4.5 身份证(不验证是否合法)

/\d{15}(\d\d[0-9xX])?/

4.6 仅包含英文字母的字符串

/^[A-Za-z]+$/

4.7 正整数

/^\d+$/

4.8 负整数

/^((-\d+)|(0+))$/

4.9 数字(正负数、小数)

/^(\-|\+)?\d+(\.\d+)?$/

4.10 IPv4

/^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/

5. 小结

正则表达式字面量需要使用 / 包裹,通常字面量会用于写死固定的正则表达式,如果需要动态生成,都会使用构造函数的方式。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源