教你轻松记住JS正则表达式

下面是 “教你轻松记住JS正则表达式” 的完整攻略。

一、正则表达式

正则表达式是一种可以用于匹配文本特定模式的表达式,也可称之为正则或RegExp。JavaScript 支持正则表达式,其构造函数即RegExp。

1.1 正则表达式的构造函数

在 JavaScript 中 RegExp 是正则表达式的构造函数,我们可以使用它创建正则表达式,语法如下:

var regExp = new RegExp(pattern, flags);

其中 pattern 为正则表达式的模式,flags 为修饰符(可选),修饰符可以去掉或添加某些功能。

示例:

var regExp1 = new RegExp('hello');
var regExp2 = new RegExp('hello', 'i');

以上代码创建了两个正则表达式,分别匹配字符串中的 "hello",但 regExp2 使用 'i' 修饰符表示匹配不区分大小写。

1.2 正则表达式的字面量

除了使用 RegExp 构造函数,JavaScript 还提供了一种简单的字面量(literal)形式来创建正则表达式。字面量创建正则表达式的形式为:/pattern/flags

示例:

var regExp3 = /hello/;
var regExp4 = /hello/i;

以上代码同样创建了两个正则表达式,分别匹配字符串中的 "hello",但 regExp4 使用 'i' 修饰符表示匹配不区分大小写。

二、正则表达式的元字符

正则表达式中的元字符指的是有特殊含义的字符,能够通过它们来构造规则。下面列出一些常用的元字符及其含义:

  • .:匹配除了换行符以外的任何字符。
  • \d:匹配数字,相当于 [0-9]
  • \D:匹配非数字,相当于 [^0-9]
  • \w:匹配单词字符(字母、数字、下划线),相当于 [A-Za-z0-9_]
  • \W:匹配非单词字符,相当于 [^A-Za-z0-9_]
  • \s:匹配空白字符,包括空格、制表符、换页符等。
  • \S:匹配非空白字符。
  • ^:匹配开头,表示以某个字符或某种类型字符开头。
  • $:匹配结尾,表示以某个字符或某种类型字符结尾。

示例:

var str = 'I love JavaScript.';
var regExp5 = /I/;
var regExp6 = /script\./i;
var regExp7 = /\d+/;
var regExp8 = /\W/;

以上代码分别创建了四个正则表达式:regExp5 匹配以 "I" 开头的字符串,regExp6 匹配以 "script." 结尾的字符串("." 在正则表达式中需要转义),regExp7 匹配字符串中的数字,regExp8 匹配非单词字符。

三、正则表达式的修饰符

上文提到过,正则表达式的修饰符可以去掉或添加某些功能。下面列出一些常用的修饰符:

  • g:全文查找,即找到所有匹配项。
  • i:忽略大小写。
  • m:多行匹配。

示例:

var str1 = 'HeLLo worLD.';
var regExp9 = /l/;
var regExp10 = /l/g;
var regExp11 = /l/i;

以上代码分别创建了三个正则表达式:regExp9 匹配第一个字符 "l",regExp10 匹配所有的字符 "l",regExp11 匹配不区分大小写的字符 "l"。

四、正则表达式的使用

正则表达式可以应用于多种场景中的文本匹配,例如验证手机号、邮箱、密码、身份证号等。在 JavaScript 中,我们通常使用正则表达式配合 String 类型的方法进行文本匹配。

4.1 test() 方法

test() 方法用于检测字符串中是否存在指定的模式,并返回 truefalse

语法:regExp.test(string)

示例:

var regExp12 = /\d+/;
regExp12.test('12345'); // true
regExp12.test('abc'); // false

以上代码使用 test() 方法检测字符串中是否存在数字,返回结果分别为 truefalse

4.2 exec() 方法

exec() 方法用于在字符串中执行正则表达式搜索,返回包含结果的数组或 null

语法:regExp.exec(string)

示例:

var regExp13 = /(\d+)-(\d+)-(\d+)/g;
var str2 = '2019-9-10, 2019-9-15';
var result = [];
var temp;
while((temp = regExp13.exec(str2)) != null) {
    result.push(temp[0]);  // 注意数组下标
}
console.log(result);  // ["2019-9-10", "2019-9-15"]

以上代码使用 exec() 方法以全局匹配的方式获取日期字符串中的年月日信息。

五、正则表达式的捕获分组

在正则表达式的模式中,我们还可以指定捕获分组,用于抽取我们所需的信息。捕获分组的格式是 "()",其中可以嵌套括号,同一正则表达式中可以有多个捕获分组。

示例:

var regExp14 = /(\d{4})-(\d{2})-(\d{2})/;
var str3 = '2019-09-15';
var match = regExp14.exec(str3);
console.log(match); // ["2019-09-15", "2019", "09", "15", index: 0, input: "2019-09-15", groups: undefined]
console.log(match[1]); // "2019"
console.log(match[2]); // "09"
console.log(match[3]); // "15"

以上代码通过捕获分组将日期字符串中的年、月、日信息分别提取出来。

六、编写正则表达式要注意的细节

编写正则表达式时需要注意以下几点:

  • 将正则表达式封装在函数中,以便重复调用。
  • 使用 test() 方法判断基本的匹配情况。
  • 尽可能使用字面量形式的正则表达式。
  • 使用捕获分组获取所需的信息。
  • 正则匹配的顺序很重要,应该将最精确的规则放在最前面。

七、总结

本文从正则表达式的构造函数、正则表达式的元字符、正则表达式的修饰符、正则表达式的使用、正则表达式的捕获分组以及编写正则表达式要注意的细节等方面分别进行了详细讲解,并给出了多个示例。掌握了上述知识点,相信读者已能够在 JavaScript 中运用正则表达式轻松地实现各种文本匹配操作。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:教你轻松记住JS正则表达式 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js插件方式打开pdf文件(浏览器pdf插件分享)

    下面是关于“js插件方式打开pdf文件(浏览器pdf插件分享)”的完整攻略: 1. 准备工作 在实现该功能前,需要将需要打开的pdf文件上传到服务器,并记住该文件的访问地址。 2. 确认浏览器是否支持pdf插件 首先,需要确认当前浏览器是否提供了自带的pdf插件或者是否安装了第三方的pdf插件。 可以让用户打开一个测试页面,例如: <!DOCTYPE …

    JavaScript 2023年5月27日
    00
  • JS对象创建的几种方式整理

    JS对象创建的几种方式整理的攻略如下: 1. 对象字面量方式 对象字面量方式是指直接使用 {} 创建对象,使用键值对的方式来描述对象的属性和属性值。示例如下: const person = { name: "Alice", age: 25, sayHi: function() { console.log("Hi, I’m &qu…

    JavaScript 2023年5月27日
    00
  • JavaScript webpack5配置及使用基本介绍

    下面我来详细讲解一下“JavaScript webpack5配置及使用基本介绍”的攻略。 1. 简介 Webpack是一个打包工具,它通过分析模块之间的依赖关系,将多个模块打包成一个或多个bundle文件,常用于前端项目的构建过程中。Webpack5是Webpack的最新版本,新增了很多功能和优化。 2. 安装和基本使用 先来安装Webpack和Webpac…

    JavaScript 2023年5月27日
    00
  • javascript 二进制运算技巧解析

    JavaScript 二进制运算技巧解析 JavaScript 中有一些二进制运算符可以用来操作数值的二进制形式,包括按位与、按位或、按位异或、左移、右移、无符号右移等。这些运算符可以用于进行一些高效的位运算操作,下面将会为大家详细讲解这些二进制运算技巧的使用方法及示例。 按位与(&)运算符 按位与运算符的符号为“&”,对于两个二进制位数,若…

    JavaScript 2023年5月19日
    00
  • JS小数运算出现多为小数问题的解决方法

    当进行JS小数运算时,经常会遇到精度丢失的问题,导致结果不准确,这是因为JS中采用IEEE754标准来表示数字,用64位二进制数来表示一个浮点数。由于数字太大或太小,无法用64位来完全表示,因此会出现精度丢失。 那么如何避免这个问题呢?下面介绍几个解决方法。 1. 使用第三方库decimal.js decimal.js是一个第三方库,用于处理JS中的小数计算…

    JavaScript 2023年6月11日
    00
  • jQuery轻量级表单模型验证插件

    下面是jQuery轻量级表单模型验证插件的完整攻略: 一、简介 jQuery轻量级表单模型验证插件是一款基于jQuery的表单验证插件,通过对表单输入内容的验证和检查,可以有效保证表单数据的有效性和安全性。 二、使用步骤 1. 引入插件 首先需要在HTML文档中引入jQuery和该插件的js文件: <script src="https://c…

    JavaScript 2023年6月10日
    00
  • Immer 功能最佳实践示例教程

    当提到Immer时,就不得不提它最常见的用途——用于高效管理和修改JavaScript对象。但是Immer并不是一个普通的库,相反,它是一个提供了便利性和可重用性的JavaScript模块,其目的在于简化代码中的树形复杂性。下面是如何在您的应用程序中使用它的一些最佳实践: 1. 安装Immer 在使用Immer的程序中,您需要首先安装它。您可以在终端中使用以…

    JavaScript 2023年6月11日
    00
  • Ajax实现简单下拉选项效果【推荐】

    下面就来讲解一下“Ajax实现简单下拉选项效果【推荐】”的实现过程。 标题 首先,我们需要确定这篇攻略的标题。可以考虑使用以下标题: Ajax实现简单下拉选项效果 确定需求 接下来,我们需要确定这篇攻略的具体需求。根据标题,我们需要实现一个下拉选项效果,包含以下需求: 网页打开时,异步请求获取下拉选项的内容并展示。 当用户选择某个选项时,通过Ajax异步请求…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部