教你轻松记住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日

相关文章

  • JSP页面间的传值方法总结

    JSP(JavaServer Pages)作为Web开发技术的重要组成部分,经常需要将一些变量数值或对象引用从一个JSP页面传递到另一个页面。本文总结了JSP页面间的传值方法,帮助开发者高效地处理这些场景。 一、JSP页面间的传值方法 1. 直接在URL中传递参数 对于两个页面直接的简单参数传递场景,可以在URL中携带参数。Servlet容器可以从HTTP请…

    JavaScript 2023年6月11日
    00
  • 解决页面js接受Long型损失精度问题(最新解决方案)

    解决页面JS接受Long型损失精度问题(最新解决方案) 在前后端分离的架构下,我们经常需要通过网络传输Long类型的数据,在前端进行处理。但是,由于JS中Number类型采用IEEE 754双精度浮点数表示,会存在精度损失的问题。而Long类型的数据更倾向于采用Java或C++等强类型语言进行处理,因此我们需要找到一种前端解决方案。 方案一:采用BigInt…

    JavaScript 2023年5月28日
    00
  • 深入理解JavaScript中Ajax

    “深入理解JavaScript中Ajax”的完整攻略如下: 理解Ajax Ajax(Asynchronous JavaScript and XML)即异步JavaScript和XML,可以实现异步服务器调用。它能在不重新加载整个页面的情况下更新页面的部分内容,从而提高网页的交互体验。 Ajax的核心用到了XMLHttpRequest对象,它可以使用XMLHt…

    JavaScript 2023年5月18日
    00
  • Bootstrap 3.x打印预览背景色与文字显示异常的解决

    问题描述 在使用 Bootstrap 3.x 进行页面开发时,我们可能会遇到打印预览中背景色与文字显示异常的问题。具体表现为: 背景色未被打印; 文字被截断或是部分未被显示。 这是因为 Bootstrap 3.x 中默认有一些 CSS 样式会影响打印预览的效果,但我们可以通过以下方式来解决问题。 解决方案 为了实现标准的打印预览效果,我们需要定义打印样式表,…

    JavaScript 2023年5月28日
    00
  • JavaScript正则表达式解析URL的技巧

    JavaScript正则表达式可以用于解析URL,可以通过正则表达式对URL进行匹配和处理,具体步骤如下: 使用正则表达式匹配URL中的协议、域名、路径、查询参数等各个部分; 将匹配结果包装成对象,方便后续的解析和处理; 通过对象的属性和方法对URL进行分析和操作。 下面分别对这三个步骤进行详细讲解。 1.使用正则表达式匹配URL的各个部分 正则表达式可以很…

    JavaScript 2023年6月10日
    00
  • 动态加载外部javascript文件的函数代码分享

    接下来我会详细讲解“动态加载外部JavaScript文件的函数代码分享”的完整攻略,包括定义、实现、示例等多个方面的内容。 定义 在简单介绍代码之前,我们先来看看“动态加载外部JavaScript文件的函数”是什么意思。动态加载外部JavaScript文件的函数是指在网页中使用JavaScript代码动态地加载外部的JavaScript文件,并执行其中的代码…

    JavaScript 2023年5月27日
    00
  • Javascript 各浏览器的 Javascript 效率对比

    首先,为了详细讲解JavaScript各浏览器的效率对比,我们需要先了解一下什么是JavaScript。简单地说,JavaScript是一种通过浏览器来运行的脚本语言,主要用于网页的动态交互和视觉效果制作。 在JavaScript的效率对比方面,一般使用各个浏览器所支持的benchmark测试来进行比较。benchmark测试是一个基准测试套件,它被用来测量…

    JavaScript 2023年5月19日
    00
  • JavaScript中setMonth()方法的使用详解

    下面是关于“JavaScript中setMonth()方法的使用详解”的完整攻略。 什么是setMonth()方法? setMonth()方法是JavaScript中Date对象原型上的一个方法,用于设置Date对象的月份。它的用法如下: dateObj.setMonth(month[, date]); 其中,month是一个0到11的整数,对应1月到12月…

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