js常用语法

👤拔丝英语网 🕔2024/01/10 20:12 📁国外生活

点击蓝字

关注我们

前言

点击蓝字

关注我们

当你需要处理各种复杂的文本匹配问题时，JS正则表达式是一个非常强大的工具。使用正则表达式，你可以精确地查找、替换和提取文本，从而大大提高代码的效率。本篇文章将会介绍JS正则表达式的基础语法、常用方法、高级应用、性能优化和实际案例应用，帮助你更加全面地了解和掌握这一强大的工具。

一、正则表达式的基础语法

正则表达式是一种用于匹配字符串模式的工具，它使用一些特殊的符号和元字符来描述要匹配的字符串。下面是正则表达式的基础语法、元字符和特殊字符、的介绍：

1.1 基础语法

正则表达式是由一系列字符和元字符组成的模式，用于匹配字符串中的内容。在 JavaScript中，我们可以使用RegExp对象来表示正则表达式，也可以使用字面量形式/pattern/来表示。例如：

var regExpObj = new RegExp("pattern"); // 使用 RegExp 对象表示正则表达式var pattern = /pattern/; // 使用字面量形式表示正则表达式

1.2 常用元字符和特殊字符

以下是一些常用的正则表达式元字符和特殊字符，它们可以用于描述匹配模式的不同特殊情况：

d：匹配数字字符，等同于[0-9]。

D：匹配任意非数字字符。

w：匹配字母、数字或下划线字符，等同于[A-Za-z0-9_]。

W：匹配任意非单词字符。

s：匹配空白字符，包括空格、制表符、换行符等。

S：匹配任意非空白字符。

b：匹配单词边界。

B：匹配非单词边界。

[ ]：字符集，匹配方括号中的任意一个字符。

[^ ]：否定字符集，匹配不在方括号中的任意一个字符。

|：或，匹配左侧或右侧的任意一个模式。

( )：捕获组，用于将匹配到的字符串保存在一个临时变量中，以便后续使用。

{ }：量词，用于描述匹配模式的重复次数。

?：量词，匹配前面的字符或组零次或一次。

+：量词，匹配前面的字符或组一次或多次。

*：量词，匹配前面的字符或组零次或多次。

^：锚点，匹配字符串的开头。

$：锚点，匹配字符串的结尾。

.：匹配任意字符（除了换行符）。

：反斜杠，用于转义下一个字符，例如+表示匹配+字符本身，是一个特殊字符。

举例：

（1）正则表达式/[abc]/可以匹配字符a、b或c中的任意一个，正则表达式 /d{3}/可以匹配三个连续的数字字符，正则表达式/(red|green|blue)/可以匹配单词red、green或blue中的任意一个，正则表达式 /(w+)s+1/ 可以匹配重复出现的单词，例如hello hello或world world。

（2）正则表达式/d+/可以匹配一个或多个数字字符，正则表达式/w+/可以匹配一个或多个单词字符，正则表达式/bwordb/可以匹配整个单词 word。

1.3 贪婪模式和非贪婪模式

在量词中，还有一个重要的概念是贪婪模式和非贪婪模式。默认情况下，正则表达式会尽可能多地匹配字符串中的字符，这被称为贪婪模式。例如，正则表达式 /a+/可以匹配一个或多个字符a，而正则表达式/a+?/是非贪婪模式，只匹配尽可能少的字符a。

1.4 标志

在正则表达式的末尾，还可以添加一些标志来控制匹配的方式。常用的标志包括：

i：忽略大小写。

g：全局匹配。

m：多行匹配。

例如，正则表达式/pattern/g可以全局匹配字符串中的所有pattern。

二、正则表达式的常用方法

JavaScript中提供了许多正则表达式的常用方法，包括test、exec、match、replace等。下面我们来详细介绍它们的使用方法和返回值。

2.1 test方法

test方法用于测试一个字符串是否匹配某个正则表达式，它的使用方式为：正则表达式.test(字符串)。如果匹配成功，返回true，否则返回false。

例如，我们可以使用以下代码测试一个字符串是否以字母a开头：

let str = "abc";let reg = /^a/;let result = reg.test(str);console.log(result); // true

2.2 exec方法

exec方法用于在一个字符串中查找匹配的文本，并返回一个包含该文本的数组。如果没有找到匹配的文本，返回null。它的使用方式为：正则表达式.exec(字符串)。

例如，我们可以使用以下代码查找一个字符串中的第一个数字：

let str = "abc123def";let reg = /d/;let result = reg.exec(str);console.log(result); // ["1"]

如果要查找所有的数字，可以使用 while 循环：

let str = "abc123def456";let reg = /d/g;let result;while (result = reg.exec(str)) {  console.log(result[0]);}// 输出 123 和 456

2.3 match方法

match方法用于在一个字符串中查找匹配的文本，并返回一个包含所有匹配文本的数组。如果没有找到匹配的文本，返回null。它的使用方式为：字符串.match(正则表达式)。

例如，我们可以使用以下代码查找一个字符串中的所有数字：

let str = "abc123def456";let reg = /d/g;let result = str.match(reg);console.log(result); // ["1", "2", "3", "4", "5", "6"]

2.4 replace方法

replace方法用于替换一个字符串中的匹配文本，并返回替换后的字符串。它的使用方式为：字符串.replace(正则表达式, 替换文本)。

例如，我们可以使用以下代码将一个字符串中的所有数字替换为字母 x：

let str = "abc123def456";let reg = /d/g;let result = str.replace(reg, "x");console.log(result); // "abcxxxdefxxx"

三、正则表达式的高级应用

正则表达式在JavaScript中有许多高级应用，包括捕获组、反向引用、前瞻、后顾等特性。下面我们来详细介绍这些特性以及如何使用它们来解决一些复杂的文本匹配问题。

3.1 捕获组

捕获组是指将正则表达式中的一部分匹配结果保存到一个临时变量中，以便后续操作使用。在JavaScript中，可以使用小括号来表示一个捕获组。例如，我们可以使用以下代码匹配一个字符串中的日期，并将年、月、日分别保存到三个变量中：

let str = "2022-04-30";let reg = /^(d{4})-(d{2})-(d{2})$/;let result = reg.exec(str);console.log(result[1]); // "2022"console.log(result[2]); // "04"console.log(result[3]); // "30"

3.2 方向引用

反向引用是指在正则表达式中引用先前匹配的结果。在JavaScript中，可以使用反斜杠加数字来引用一个捕获组的匹配结果。例如，我们可以使用以下代码匹配一个重复出现的单词：

let str = "hello hello world world";let reg = /(bw+b) 1/g;let result = str.replace(reg, "$1");console.log(result); // "hello world"

上面的正则表达式中，b表示单词边界，w+表示一个或多个字母、数字或下划线，(bw+b)表示一个单词的捕获组，1表示引用第一个捕获组的匹配结果，$1表示替换为第一个捕获组的匹配结果。

3.3 前瞻

前瞻是指在正则表达式中匹配一个字符，但不将其包含在捕获组中。在 JavaScript中，可以使用(?=pattern)来表示一个正向前瞻，即在匹配pattern 的位置后面匹配一个字符。例如，我们可以使用以下代码匹配一个数字后面的字母：

let str = "123abc";let reg = /d(?=[a-z])/;let result = reg.exec(str);console.log(result[0]); // "3"

3.4 后顾

后顾是指在正则表达式中匹配一个字符，但只检查其前面的字符，不包括自身在内。在JavaScript中，可以使用(?<=pattern)来表示一个正向后顾，即在匹配 pattern的位置前面匹配一个字符。例如，我们可以使用以下代码匹配一个字母前面的数字：

let str = "123abc";let reg = /(?<=d)[a-z]/;let result = reg.exec(str);console.log(result[0]); //

四、正则表达式的性能优化

正则表达式是一种强大的文本匹配工具，但在处理大量数据时可能会影响性能。下面介绍几种优化正则表达式性能的方法：

减少回溯次数

回溯是指当正则表达式匹配失败时，会尝试改变匹配策略重新匹配的过程。回溯次数越多，匹配时间就越长。为了减少回溯次数，可以使用惰性匹配，避免使用 .*这样的贪婪匹配，尽量使用精确匹配。

避免过多的分组

分组是正则表达式中常用的语法，但是过多的分组会影响性能。建议尽量减少分组数量，将正则表达式写得简洁明了。

使用快速匹配的语法

在匹配大量文本时，使用快速匹配的语法可以提高匹配效率。例如，使用b替换^和$，使用d替换[0-9]，使用s替换[tnrf]等。

使用字符集

字符集是指用方括号[]包裹起来的一组字符，可以用来匹配其中任意一个字符。使用字符集可以减少匹配次数，提高匹配效率。

避免嵌套重复

在正则表达式中，嵌套的重复次数可能会导致性能问题。例如，(?:a*)*这个正则表达式的重复次数是指数级别的，会严重影响性能。建议避免使用嵌套的重复次数，尽量使用非嵌套的重复次数。

使用正则表达式标志

正则表达式有三个标志，分别是g、i和m。g表示全局匹配，i表示不区分大小写匹配，m表示多行匹配。合理使用这些标志可以提高匹配效率。

五、实际案例的应用

正则表达式在实际开发中有很多应用场景，其中包括常见数据的校验和提取。下面以手机号码、邮箱地址、身份证号码等为例，介绍如何使用正则表达式进行数据校验和提取。

5.1 手机号校验

手机号码是我们经常需要验证的一种数据类型，可以通过正则表达式来验证。以下是一个简单的正则表达式，用于验证国内的手机号码：

/^1[3-9]d{9}$/

这个正则表达式的含义是以数字1开头，后面跟着3-9之间的数字，最后是9位数字。可以通过以下JavaScript代码来验证一个字符串是否符合这个正则表达式：

const regExp = /^1[3-9]d{9}$/;const phoneNumber = '13800138000';const isPhoneNumberValid = regExp.test(phoneNumber); // true

5.2 邮箱地址校验

邮箱地址也是我们经常需要验证的一种数据类型，可以通过正则表达式来验证。以下是一个简单的正则表达式，用于验证常见的邮箱地址：

/^[w-]+@[w-]+(.[w-]+)+$

这个正则表达式的含义是匹配由字母、数字、下划线、短横线组成的用户名，后面跟着一个@符号，然后是由字母、数字、下划线、短横线和点号组成的域名，最后可能会有一个或多个点号和域名组合成的顶级域名。可以通过以下 JavaScript 代码来验证一个字符串是否符合这个正则表达式：

const regExp = /^[w-]+@[w-]+(.[w-]+)+$/;const emailAddress = 'example@example.com';const isEmailAddressValid = regExp.test(emailAddress); console.log(isEmailAddressValid); // true

5.3 身份证号码提取

身份证号码是中国公民身份证上的唯一标识符，可以通过正则表达式来提取其中的信息。以下是一个简单的正则表达式，用于提取身份证号码中的出生日期：

/d{6}(18|19|20)d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]/

这个正则表达式的含义是匹配前 6 位数字是出生年月日，然后是固定的 4 位数字，最后是一位数字或字母 X，用于校验身份证号码的正确性。可以通过以下 JavaScript 代码来提取一个身份证号码中的出生日期：

const idCard = '11010119900307353X';const regex = /^(d{6})(d{4})(d{2})(d{2})d{2}[dX]$/;const matches = idCard.match(regex);if (matches) {  const [, year, month, day] = matches;  console.log(`${year}-${month}-${day}`); // 1990-03-07} else {  console.log('无效的身份证号码');}

这里的正则表达式/^(d{6})(d{4})(d{2})(d{2})d{2}[dX]$/中使用了多个捕获组，分别用于提取出生年月日的各个部分。其中，d表示数字，{n}表示前面的字符匹配n次，[...] 表示匹配括号内任意一个字符，^表示匹配字符串的开始，$表示匹配字符串的结束。最后使用match()方法来查找符合条件的身份证号码，并使用解构赋值语法来提取出生年月日的各个部分，然后进行格式化输出。如果匹配失败，则输出一个错误提示。

5.4 提取HTML标签

另一个实际应用是提取HTML标签中的内容。比如我们需要从一个包含多个 HTML标签的字符串中提取所有的p标签里面的文本内容。这个时候可以使用正则表达式配合match()方法来实现。例如：

const html = '<div><p>Hello</p><p>World</p></div>';const regex = /<p>(.*?)</p>/g;const matches = html.match(regex);console.log(matches); // ['<p>Hello</p>', '<p>World</p>']
// 提取内容const contents = matches.map((match) => match.replace(/</?p>/g, ''));console.log(contents); // ['Hello', 'World']

这里的正则表达式/(.*?)/g中使用了捕获组(.*?)来提取标签中的内容，. 匹配任意字符，* 匹配零个或多个，?表示非贪婪匹配，避免匹配到其他的标签，/ 表示转义后的 / 字符，g 表示全局匹配。然后使用 match()方法来查找所有匹配的结果，得到一个包含所有p标签的数组，接着用 map()方法对数组中的每个标签进行替换，去除掉和标签，最终得到一个包含所有内容的数组。

总结

正则表达式是一个强大的文本匹配工具，JavaScript中有很多常用方法可以用来操作正则表达式，如test、exec、match和replace等。在实际开发中，我们可以使用正则表达式来校验和提取数据，如手机号码、邮箱地址和身份证号码等。要注意正则表达式的性能优化，以避免不必要的回溯和过多的分组。同时，也要掌握正则表达式的高级应用，如捕获组、反向引用、前瞻和后顾等，以解决一些复杂的文本匹配问题。

END

NO.1

往期回顾

谈谈你对ES6中Class类的理解

半路出家：转行做个程序员你需要知道的五件事

Web端即时通讯必备技术：WebSocket快速入门

谈一下你对ES6的代理模式-Proxy的理解

分享，点赞，在看，

都在这儿,点我不香吗？

js常用语法

发表评论

发表回复

相关文章

发表评论

发表回复