教你轻松记住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获取对象、数组的实际长度,元素实际个数的实现代码

    获取对象、数组的实际长度和元素实际个数是 JavaScript 开发中常见的需求,下面是实现代码的完整攻略。 获取对象实际长度的代码 JavaScript 中获取对象实际长度的方法与获取数组长度的方法是相似的,可以利用 Object.keys() 函数和 for…in 循环来实现。这里我们提供两种方法: 方法一:利用 Object.keys() 函数 c…

    JavaScript 2023年5月27日
    00
  • IOS游戏开发之五子棋OC版

    《IOS游戏开发之五子棋OC版》是一篇很好的开发攻略,下面我将详细讲解这篇攻略的内容。 标题1 标题2 标题3 首先,这篇攻略中介绍了五子棋游戏的规则,包括如何在棋盘上下棋,以及如何判断胜负等。然后,文章介绍了如何通过Objective-C来实现五子棋游戏的逻辑,包括如何设计数据模型、如何处理用户的操作以及如何判断胜负等。 示例1:在代码实现方面,作者给出了…

    JavaScript 2023年6月11日
    00
  • 老生常谈ES6中的类

    ES6中的类是JavaScript语言中的一种新的语法糖,它提供了一种更加优雅的面向对象的编程方式,让JavaScript变得更加易读、易维护。在ES6之前,我们在JavaScript中实现继承是通过原型链来实现的。但是这种方式缺少了一个明确的语法结构,不够直观,而且容易出现错误。ES6中引入了类的概念,让我们能够更加方便、清晰地定义类和继承关系。下面我将详…

    JavaScript 2023年6月11日
    00
  • js中document.getElementByid、document.all和document.layers区分介绍

    下面是关于“js中document.getElementByid、document.all和document.layers区分介绍”的完整攻略。 一、介绍 在 JavaScript 中,用于访问和操作 HTML 页面中的元素的常见的方式有三种:document.getElementByid、document.all和document.layers。它们分别代…

    JavaScript 2023年6月10日
    00
  • JavaScript的Proxy可以做哪些有意思的事儿

    下面是详细讲解 JavaScript 的 Proxy 可以做哪些有意思的事儿的完整攻略: 什么是JavaScript Proxy Proxy 是 ES6 中的一个新特性,用于在对象之前设立一个“拦截器”,对该对象的访问进行过滤和改写,提供了一种机制来对对象的访问进行监视和控制。 Proxy 最常见的用途之一是在对象上设置隐藏属性或包装器,它可以通过重写 ge…

    JavaScript 2023年5月27日
    00
  • 前端常用的js函数方法

    在讲解前端常用的JS函数方法之前,先介绍一下JS的基础知识。 JS基础知识 1. 数据类型 JS中包含6种数据类型: string(字符串):用于表示文本数据,可使用单引号、双引号或反引号(ES6新增)引用字符串。如:’hello’、”world”、hello world; number(数字):表示数值数据,包括整数、浮点数、负数、正数、NaN等等。如:1…

    JavaScript 2023年5月27日
    00
  • JS碰撞运动实现方法详解

    JS碰撞运动实现方法详解 什么是JS碰撞运动? JS碰撞运动是指在HTML页面中通过JavaScript代码实现物体自由运动的效果,并且当这些物体相互碰撞时,它们之间会产生一定的相互作用和反应的效果。 JS碰撞运动在游戏开发、动画制作、交互界面设计等方面有着广泛的应用,是Web开发中一个非常重要的技术。 实现方法 JS碰撞运动的实现,可以分为三个步骤:自由运…

    JavaScript 2023年5月28日
    00
  • JQuery插入DOM节点的方法

    JQuery是一款操作DOM的JavaScript库,提供了很多操作DOM节点的方法,包括插入DOM节点的方法。以下是关于JQuery插入DOM节点的方法的完整攻略: 一、插入DOM节点的方法 在JQuery中,插入DOM节点的方法可以使用以下几种: 1.append()方法 append() 方法向被选元素的结尾(即作为其最后一个子元素)插入指定内容。 /…

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