极客教程HTML 正则表达式
在 HTML 中，往往需要针对标签、属性等进行文本处理或者字符串匹配。这时候我们就需要用到正则表达式（RegExp）。
经常会用到的重复匹配字符，在正则表达式中可以用以下方式来表示：
| 符号 | 描述 |
|---|---|
* |
匹配前面的表达式任意次 |
+ |
匹配前面的表达式至少 1 次 |
? |
匹配前面的表达式 0 次或 1 次 |
{n} |
匹配前面的表达式恰好 n 次 |
{n,} |
匹配前面的表达式至少 n 次 |
{n,m} |
匹配前面的表达式至少 n 次，至多 m 次 |
在 HTML 中，经常需要匹配的标签和属性有很多，以下是一些实际应用例子：
匹配 img 标签的 src 属性
<img src="https://example.com/image.jpg">
const img = '<img src="https://example.com/image.jpg">';
const pattern = /<img.+?src="(.*?)"/;
const src = img.match(pattern)[1];
console.log(src); // https://example.com/image.jpg
匹配 a 标签的 href 属性
<a href="https://example.com">Example</a>
const a = '<a href="https://example.com">Example</a>';
const pattern = /<a.+?href="(.*?)"/;
const href = a.match(pattern)[1];
console.log(href); // https://example.com
匹配 p 标签内的文本内容
<p>Hello World!</p>
const p = '<p>Hello World!</p>';
const pattern = /<p>(.*?)<\/p>/;
const text = p.match(pattern)[1];
console.log(text); // Hello World!
匹配 html 标签中的 lang 属性
<html lang="en">
const html = '<html lang="en">';
const pattern = /<html.+?lang="(.*?)"/;
const lang = html.match(pattern)[1];
console.log(lang); // en
其中的 .+? 表示任意字符重复 1 次或 1 次以上，且取最小长度。
如果要匹配的标签或属性稍微复杂一些，我们还可以使用正则表达式中的分组符 ()，同时用 ? 或 | 进行条件匹配。
匹配特定的 div 标签
<div class="container">Hello World!</div>
const div = '<div class="container">Hello World!</div>';
const pattern = /<div class="container">(.+?)<\/div>/;
const text = div.match(pattern)[1];
console.log(text); // Hello World!
匹配包含指定属性的所有标签
<div class="container">Hello World!</div>
<div class="header">Header</div>
<div class="footer">Footer</div>
const html = '<div class="container">Hello World!</div><div class="header">Header</div><div class="footer">Footer</div>';
const pattern = /<div.+?class="([^"]+)".*?>/;
const matches = html.matchAll(pattern);
for (const match of matches) {
console.log(match[1]); // container header footer
}
这里使用了 matchAll 方法来获取所有匹配结果。
结论
在 HTML 文本处理和字符串匹配中，正则表达式是非常重要的工具。通过灵活使用基础正则匹配符和分组、条件匹配等高级技巧，我们可以很方便地完成绝大多数工作。需要注意的是，在编写正则表达式时，一定要注意贪婪匹配和最小匹配的区别，以及特殊字符需要进行转义的问题，否则可能导致匹配失败。需要不断练习，逐渐掌握正则表达式的使用技巧。