如何使用awk或sed从HTML代码中提取所有属性名与值（适配macOS）

原实现问题 #

你之前的 awk 命令默认按空格分割字段，会把属性值内部的空格也当做分隔符，导致aria-label="abc ofe"这类带空格的属性被拆成多段，同时也没有过滤标签尖括号等无关内容。

兼容 macOS 的 awk 实现（推荐，无额外依赖） #

完全符合 POSIX 标准，macOS 自带的原生 awk 即可直接运行，支持正确提取带空格的属性值：

# 处理单个文件时，直接替换末尾的输入源为你的文件路径即可，比如 awk '...' your_file.html
echo '<a href="abc.com" aria-label="abc ofe" class="abc"><span class="bcd">abc</span><span class="icon"></span></a>' | awk '
{
    while (match($0, /[[:alnum:]_-]+="[^"]*"/)) {
        print substr($0, RSTART, RLENGTH)
        $0 = substr($0, RSTART + RLENGTH)
    }
}'

运行输出 #

href="abc.com"
aria-label="abc ofe"
class="abc"
class="bcd"
class="icon"

实现逻辑 #

1. 正则[[:alnum:]_-]+="[^"]*"匹配所有符合规则的属性片段：
   • 前面的[[:alnum:]_-]+匹配属性名，支持大小写字母、数字、下划线、横杠
   • 后面的[^"]*匹配双引号包裹的所有属性值内容，不会把属性值内部的空格当做分隔符
2. 循环匹配整行内容，每匹配到一个属性就打印，然后截断已处理的内容继续匹配后续片段，直到整行处理完成

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