正则表达式入门 —— 匹配万千标签的前提

2023-09-28 01:01:38

前言

工作中，正则表达式用的可能不是很多，一般使用的时候网上都有现成的实例，很少缺乏比较全面的理解。本文主要以匹配HTML标签为例，简述下正则表达式常用的功能点。

正则表达式的基本语法

正则表达式的声明方式和普通变量的声明方式类似，一般情况下有两种，字面量和正则构造方法RegExp。

// 字面量
const regex = /pattern/;

// RegExp构造方法
const regex = new RegExp('pattern');

正则表达式的基本语法包括：

字符组： []内的字符表示匹配其中任何一个字符。例如，/[abc]/可以匹配a、b或c。
元字符： 元字符是一个具有特殊含义的字符，例如.（匹配任何字符）、^（匹配字符串的开头）和$（匹配字符串的结尾）。
量词： 量词指定匹配模式出现的次数。例如，+（匹配至少一次）、*（匹配零次或多次）和?（匹配零次或一次）。
分组： 分组使用()将模式的一部分分组。这对于捕获子字符串或重复模式很有用。

匹配HTML标签

现在，我们来看看如何使用正则表达式匹配HTML标签。

// 匹配任何HTML标签
const regex = /<.*?>/;

// 匹配特定的HTML标签，例如`<p>`
const regex = /<p.*?>/;

// 匹配具有特定属性的HTML标签，例如具有`id="content"`属性的`<div>`
const regex = /<div id="content".*?>/;

// 匹配具有特定内容的HTML标签，例如包含"Hello World"的`<p>`
const regex = /<p>Hello World<\/p>/;