批量修改html页面

Question

在下面的index.html页面中，我插入了一个类为"topnav“的div (参见带有额外硬返回的部分)。现在，我需要在目录中的所有其他HTML页面中使用相同的代码(“topnav”类的div)。这可能是几百个文件！我在想：“有人能帮我创建一个脚本吗？”或者通过推送javascript文件来转换文件夹中的所有HTML页面？所有页面都有相同的页眉。所以我们可以说:在第一个之后，添加一个带有home/search的新and部分

​

function relPathToAbs(sRelPath) {
  var nUpLn, sDir = "",
    sPath = location.pathname.replace(/[^\/]*$/, sRelPath.replace(/(\/|^)(?:\.?\/+)+/g, "$1"));
  for (var nEnd, nStart = 0; nEnd = sPath.indexOf("/../", nStart), nEnd > -1; nStart = nEnd + nUpLn) {
    nUpLn = /^\/(?:\.\.\/)*/.exec(sPath.slice(nEnd))[0].length;
    sDir = (sDir + sPath.substring(nStart, nEnd)).replace(new RegExp("(?:\\\/+[^\\\/]*){0," + ((nUpLn - 1) / 3) + "}$"), "/");
  }
  return sDir + sPath.substr(nStart);
}

<?xml version="1.0" encoding="utf-8"?>
<!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">

<head>


  <title>6129103883 - Schema ST4 styles -- Reference view - do not translate this file. Aperçu de référence - ne pas traduire ce fichier. Referenzansicht - diese Datei nicht übersetzen.</title>
  <meta http-equiv="Content-Script-Type" content="text/javascript"
  />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta http-equiv="generator" content="SCHEMA ST4" />
  <script language="JavaScript" src="Scripts/Common.Core.js" type="text/javascript" charset="UTF-8">
  </script>
  <script language="JavaScript" src="Scripts/Common.Language.js" type="text/javascript" charset="UTF-8">
  </script>
  <script language="JavaScript" src="Scripts/Production.js" type="text/javascript" charset="UTF-8">
  </script>
  <link rel="stylesheet" href="layout.css" type="text/css" />
  <link rel="stylesheet" href="CSS/Common.Reset.css" type="text/css" />
  <link rel="stylesheet" href="CSS/Core.Production.css" type="text/css" />
  <link rel="stylesheet" href="CSS/HTML.css" type="text/css" />
</head>

<body>
  <div class="page">
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="metatable">
      <tr>
        <td class="project">Schema ST4 styles -- Reference view - do not translate this file. Aperçu de référence - ne pas traduire ce fichier. Referenzansicht - diese Datei nicht übersetzen.</td>
      </tr>


      <td>
        <tr>
          <div class="topnav">
            <a class="active" href="#home">Home</a>
            <input type="text" placeholder="Search..">
          </div>
      </td>
      </tr>

    </table>





    <table cellpadding="0" cellspacing="0" class="contentLayout">
      <tr>
        <td class="contentLayoutOne">
          <div class="navigation tripletNavigation">
            <div class="tripletHead tripletHeadInfoType"><a href="2729458059.html">Example of Heading 0 (metadata – Installer or User)</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9007201984201227.html">Example of Heading 1 (metadata – TitleAcrossAllColumns)</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9007201984203403.html">Example of Heading 1 (metadata – TitleAsSectionTitle)</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9007201983504779.html">Example of Heading 1</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9205593483.html">New Node</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9223259787.html">New Node</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="3529022091.html">Button yes/no</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="3529617035.html">Button history yes</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="3529674763.html">Button history no</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="3529732875.html">Button history</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9299784587.html">Topic that contains fragment to link to</a></div>
            <div class="tripletHead tripletHeadInfoType"><a href="9299786507.html">Topic with links</a></div>
          </div>
        </td>
        <td class="contentLayoutTwo"><img src="" /></td>
        <td class="contentLayoutThree">
          <div class="content">
            <div class="titlePageContent"> </div>
          </div>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

​

当然，我们现在只插入了工具栏，所以我们仍然需要一个搜索javascript来添加到文件夹结构/HTML页面中。有什么建议吗？

Answer 1

如果您在Visual Studio Code之类的代码中使用查找和替换功能，则只需用更新后的头文件替换整个头文件即可。