如何使用标准Unix命令为HTML文件中的id属性及对应选择器添加后缀

DevOps 小满

2026-9-25

解决方案

方案1：grep+sed组合方案（适合简单场景）

先提取所有实际存在的id值，再针对性替换，避免误改十六进制颜色：

# 提取所有id值，去重后拼接为正则匹配组
IDS=$(grep -o 'id\s*=\s*["'\'']\?[-_a-zA-Z0-9]\+["'\'']\?' index.html | sed -E 's/id\s*=\s*["'\'']?([-_a-zA-Z0-9]+)["'\'']?/\1/' | sort -u | tr '\n' '|' | sed 's/|$//')
# 执行替换，仅匹配已存在的id
sed -E -e "s/id\s*=\s*(['\"]?)($IDS)(['\"]?)/id=\1\2-suffix\3/g" -e "s/#($IDS)([^-_a-zA-Z0-9]|$)/#\1-suffix\2/g" index.html

已解决的问题：

支持单引号、双引号、无引号包裹的id属性，兼容不规范HTML写法
仅替换实际存在的id对应的CSS选择器，不会误改不在id列表内的十六进制颜色值

方案2：awk方案（适合复杂场景，推荐）

可以精准识别<style>标签范围，完全避免误改标签内联样式中的十六进制颜色：

awk '
BEGIN {
    suffix = "-suffix"
}
# 第一轮扫描：收集文件中所有出现过的id值
FNR == NR {
    while (match($0, /id\s*=\s*["'\'']?([-_a-zA-Z0-9]+)["'\'']?/, m)) {
        ids[m[1]] = 1
        $0 = substr($0, RSTART + RLENGTH)
    }
    next
}
# 第二轮扫描：处理替换逻辑
/<style>/ { in_style = 1 }
/<\/style>/ { in_style = 0 }
{
    # 替换所有id属性
    $0 = gensub(/id\s*=\s*(["'\'']?)([-_a-zA-Z0-9]+)(["'\'']?)/, "id=\\1\\2"suffix"\\3", "g")
    # 仅在style标签内部替换id选择器
    if (in_style) {
        for (id in ids) {
            $0 = gensub("#"id"([^-_a-zA-Z0-9]|$)", "#"id suffix "\\1", "g", $0)
        }
    }
    print
}
' index.html index.html