如何用51行代码替换文件夹中所有.html文件的前69行？

DevOps 小满

2026-8-15

批量替换HTML文件头部导航的AWK实现方案

问题背景

手里有数十个不同名称的HTML文件，需要将文件中旧的head和导航部分替换为新的优化代码，同时title标签要么设为固定的「Plant Database」，要么根据文件名动态生成。

旧代码片段（需替换的部分）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/templatefrø.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Apotekerkattost - Malva sylvestris</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link rel="shortcut icon" href="bilder/faviconefferus.ico">
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="bilder/efferus1.jpg" width="289" height="129" alt="Efferus veksthus" /></div>
<div id="menu">
<a href="index.html" ><img src="bilder/Home.jpg" border="0" width="128" height="35" /></a><a href="planteshop.html"><img src="bilder/Frørød.jpg" border=0 width="123" height="35" /></a>
<a href="soppshop.html"><img src="bilder/soppsort.jpg" border="0" width="138" height="35" /></a>
<a href="skogshop.html"><img src="bilder/skogshop.jpg" border="0" width="138" height="35" /></a>
<a href="Oppskrifter.html"><img src="bilder/Oppskrifter.jpg" border="0" width="118" height="35" /></a>

</div>
<br >
<div id="middle">
  <div id="submenu"><table width="201" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><div align="center"><img src="bilder/subtop.jpg" width="198" height="24" /></div></td>
  </tr>
  <tr>
    <td><div align="center" class="sub-bg">
    
      <p>
      <a href="planteshop.html">Planteshop</a><br><br>
      <a href="fro.html">Frø- og plantekatalog</a><br><br>
            <a href="plantebistand.html">Plantebistand</a><br><br>
                  <a href="kurs.html">Kurskalender </a><br><br>
      <a href="bie.html">Humle- og bieplanter</a><br><br>
      <a href="hsoner.html">Planter inndelt etter herdighetssone</a><br><br>
      <a href="plantepakker.html">Plantepakker</a><br><br>
        <a href="trehage.html">Hva er en skoghage?</a><br><br>
         <a href="skoghagebilder.html">Bilder fra en skoghage</a><br><br>
        <a href="nitrogen.html">Nitrogenfiksering</a><br><br>
        <a href="jord.html">Jorddekkere</a><br><br>
        <a href="vind.html">Vindbrytere</a><br><br>
        <a href="tre.html">Trær</a><br><br>
        <a href="busker.html">Busker</a><br><br>
        <a href="perennial.html">Stauder</a><br><br> 
        <a href="systemplanter.html">Systemplanter</a><br><br> 
        <a href="andre.html">Andre planter</a><br><br>
           <a href="Rovinsekter.html">Skadeinsekter og nytteinsekter</a><br><br>
            <a href="plantesykdommer.html">Plantesykdommer</a><br><br>
        <a href="formering.html">Planteformering</a><br><br>
        <a href="beskjaering.html">Beskjæring</a><br><br>

        <a href="ugressmiddler.html">Ugressmiddel</a><br><br>
        <a href="http://www.facebook.com/EfferusVeksthus">Efferus veksthus på <img src="bilder/fb.jpg" width="15" height="15" /></a><br><br>
            <a href="https://www.facebook.com/groups/662923897182715/?fref=ts">"Dyrking av Storhassel i Norge" på <img src="bilder/fb.jpg" width="15" height="15" /></a><br><br>
             <a href="https://www.facebook.com/groups/245491145952851/?fref=ts">Skadeinsekter,  nytteinsekter og plantesykdommer på <img src="bilder/fb.jpg" width="15" height="15" /></a><br><br>
        <a href="hvemerfro.html">Hvem er Efferus?</a><br><br>
        <a href="kontaktfro.html">Kontakt</a><br><br>
        <a href="open.html">Åpningstider</a><br><br>
      </p>
    </div></td>
  </tr>
  <tr>
    <td><div align="center"><img src="bilder/subbottom.jpg" width="198" height="35" /></div></td>
  </tr>
</table>
</div>

新代码片段（替换后的内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Plant Database</title>
    <link rel="shortcut icon" href="bilder/deciduous-tree.ico">
    <link href="main_styles.css" rel="stylesheet" type="text/css"/>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Domine:wght@400;600;700&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&display=swap');
    </style>
</head>
    
<!-- ALWAYS ON HOME BUTTON -->
<a href="/NEW_index.html"><img id=left_space style="position: fixed; top: 1.5rem;" src="./bilder/Efferus_logo_black.png" width="100px"></a>

<!-- HEADER -->
<nav class="navbar" >
    
    <!-- LOGO -->
    <div id=left_space class="logo"><a href="/NEW_index.html"><img src="bilder/Efferus_logo_white.PNG" width="100px" alt="efferus_logo"/></a></div>
    
    <!-- NAVIGATION MENU -->
    <ul class="nav-links">
      
        <!-- USING CHECKBOX HACK -->
      <input type="checkbox" id="checkbox_toggle" />
      <label for="checkbox_toggle" class="hamburger">&#9776;</label>
      
      <!-- NAVIGATION MENUS -->
      <div class="menu">
        
        <li><a href="./plantebistand.html">Plantebistand</a></li>
        <li class="services">
          <a href="./database.html">Database</a>
          <!-- <ul class="dropdown">
            <li><a href="./fro.html">Frø og Planter </a></li>
            <li><a href="./Oppskrifter.html">Konserving</a></li>
            <li><a href="./husapotek.html">Husapotek</a></li>
            <li><a href="/">Dropdown 3</a></li>
            <li><a href="/">Dropdown 4</a></li>
          </ul> -->
        </li>
        <li><a href="./hvemer.html">Hvem er Efferus?</a></li>
        <li><a href="./kontakt.html">Kontakt</a></li>
      </div>
    </ul>
</nav>

实现方案

步骤1：准备新代码文件

将上面的新代码片段保存为new_header.html，放在和目标HTML文件相同的目录下。

方案A：固定标题「Plant Database」

创建AWK脚本文件replace_fixed_title.awk，内容如下：

BEGIN {
    # 读取新头部内容到变量
    while ((getline line < "new_header.html") > 0) {
        new_header = new_header line "\n"
    }
    close("new_header.html")
    skip = 1  # 初始状态：跳过旧内容
}

# 匹配旧内容的结束行（旧代码最后一行）
/^<\/div>$/ {
    print new_header  # 输出新头部
    skip = 0          # 关闭跳过状态
    next              # 不输出当前旧行
}

# 非跳过状态时输出当前行
!skip { print }

批量执行替换
在终端中运行以下命令，遍历所有HTML文件并替换：

# 先备份所有文件（可选但推荐）
cp *.html backup/

# 批量替换
for file in *.html; do
    awk -f replace_fixed_title.awk "$file" > "$file.tmp" && mv "$file.tmp" "$file"
done

方案B：根据文件名动态生成标题

该方案会将HTML文件名去掉.html后缀后作为页面标题，比如malva.html的标题会变成malva。

创建AWK脚本文件replace_dynamic_title.awk，内容如下：

BEGIN {
    # 读取新头部内容到数组
    while ((getline line < "new_header.html") > 0) {
        header_lines[++line_count] = line
    }
    close("new_header.html")
    skip = 1
}

# 匹配旧内容结束行
/^<\/div>$/ {
    # 提取文件名（去掉.html后缀）
    split(FILENAME, name_parts, ".")
    page_title = name_parts[1]
    
    # 输出修改后的头部
    for (i=1; i<=line_count; i++) {
        if (header_lines[i] ~ /<title>Plant Database<\/title>/) {
            print "<title>" page_title "</title>"
        } else {
            print header_lines[i]
        }
    }
    skip = 0
    next
}

# 非跳过状态时输出当前行
!skip { print }

批量执行替换
同样先备份文件，然后运行：

cp *.html backup/

for file in *.html; do
    awk -f replace_dynamic_title.awk "$file" > "$file.tmp" && mv "$file.tmp" "$file"
done

注意事项

先对单个文件测试脚本，确认效果后再批量执行
务必备份原文件，避免操作失误丢失数据
如果旧代码的结束行不是^</div>$，需要调整脚本中的匹配规则，确保准确识别旧内容的结尾

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

如何用51行代码替换文件夹中所有.html文件的前69行？

问题背景 #

旧代码片段（需替换的部分） #

新代码片段（替换后的内容） #

实现方案 #

步骤1：准备新代码文件 #

方案A：固定标题「Plant Database」 #

方案B：根据文件名动态生成标题 #

注意事项 #