如何使用Regex提取HTML中所有属性的值

目标HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="homeWork.css">
    <script src="./homeWork.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class='container'>
        <div class='mango'> first div mango</div>
        <div type='red' class='m2ango'>div red m2ango</div>
        <div type='green' class='magngo'>div green magngo</div>
        <li class='mango'>li mango
    </div>
    <div class='mango'>second div mango</div>
    <li type='green' class='mango'>li green mango
        </div>
        <div id="div1"></div>
        <div id="div2"></div>

</body>

</html>

匹配正则表达式 #

(\w+)(?:-?\w+)?\s*=\s*(['"])(.*?)\2

提取后的中文结果 #

• 语言: en
• 关系: stylesheet
• 引用地址: homeWork.css
• 引用地址: ./homeWork.js
• 字符编码: UTF-8
• 兼容模式: X-UA-Compatible
• 内容: IE=edge
• 视口: viewport
• 内容: width=device-width, initial-scale=1.0
• 类名: container
• 类名: mango
• 类型: red
• 类名: m2ango
• 类型: green
• 类名: magngo
• 类名: mango
• 类名: mango
• 类型: green
• 类名: mango
• 标识: div1
• 标识: div2

正则逻辑说明 #

这个正则可以兼容单/双引号包裹的属性值，同时支持带连字符的属性名（比如http-equiv）：

• (\w+)(?:-?\w+)?: 匹配属性名，涵盖普通单单词属性和带连字符的组合属性
• \s*=\s*: 匹配属性名与值之间的等号，自动忽略前后空格
• (['"]): 捕获开头的引号类型，用于后续匹配闭合引号
• (.*?): 非贪婪匹配引号内的属性值，避免跨引号匹配
• \2: 匹配与开头一致的闭合引号，确保属性值的边界准确

内容的提问来源于stack exchange，提问作者mali