可用正则提取html标签文本,如匹配 <p>内容</p> 中的内容;2. 可提取标签属性值,如 img 的 src;3. 可提取超链接的URL和显示文本;4. 但正则不适用于嵌套或格式错误的HTML,建议仅在简单场景使用,复杂结构应使用dom解析器。

在处理网页内容或字符串时,经常需要从HTML中提取特定信息。虽然不推荐用正则表达式解析完整的HTML结构(应使用DOM解析器),但在简单场景下,正则表达式可以快速提取所需内容。
1. 提取HTML标签中的文本内容
如果你想从某个HTML标签中提取文本,比如获取 <p>Hello</p> 中的 “Hello”,可以使用如下正则:
/<p>(.*?)</p>/g
说明:
- (.*?) 是非贪婪匹配,捕获标签内的内容
- g 标志表示全局匹配,找到所有匹配项
- 注意斜杠 / 需要转义为 /
示例代码:
立即学习“前端免费学习笔记(深入)”;
const html = ‘<p>第一段</p><p>第二段</p>’; const matches = […html.matchAll(/<p>(.*?)</p>/g)]; matches.foreach(match => console.log(match[1])); // 输出:第一段,第二段
2. 提取指定标签的属性值
例如提取所有图片的 src 属性:
/<img[^>]+src=[“‘]([^”‘]+)[“‘][^>]*>/g
说明:
- [^>]+ 匹配标签内任意非“>”字符
- [“‘]([^”‘]+) 匹配单引号或双引号内的src值
- 适用于格式较规范的HTML片段
示例:
const html = ‘<img src=”pic1.jpg” alt=”图1″><img src=”pic2.png”>’; const srcs = […html.matchAll(/<img[^>]+src=[“‘]([^”‘]+)[“‘][^>]*>/g)]; srcs.forEach(match => console.log(match[1])); // pic1.jpg, pic2.png
3. 提取超链接中的URL和链接文本
提取 <a href=”…”>… 的链接地址和显示文字:
/<a[^>]+href=[“‘]([^”‘]+)[“‘][^>]*>(.*?)</a>/g
示例:
const html = `<a href=”https://example.com”>访问示例网站</a>`; const links = […html.matchAll(/<a[^>]+href=[“‘]([^”‘]+)[“‘][^>]*>(.*?)</a>/g)]; links.forEach(match => { console.log(‘URL:’, match[1]); // https://example.com console.log(‘文本:’, match[2]); // 访问示例网站 });
4. 注意事项与局限性
正则提取HTML有明显限制:
- 无法处理嵌套标签(如 div 套 div)
- 对格式错误的HTML容易出错
- 不支持完整HTML语法(注释、自闭合标签等)
- 性能不如原生DOM解析
建议: 在node.js或浏览器环境中,优先使用DOMParser或jsdom等工具。仅在轻量、可控的HTML片段中使用正则。
基本上就这些,正则适合简单提取,复杂结构还是交给解析器更稳妥。