Question

我正在为网站清理和实施自定义内容管理系统。网站上的所有页面都很简单，基本上是静态的，HTML页面构建为一个简单的模板，如下所示：

<html>
    <head><!-- resources, scripts, etc. --></head>

    <body>

       <div id="page">

           <div id="header"><!--- static --></div>

           <div id="content">
                <!-- The main content - different on every page -->
           </div>

           <div>
             <!-- Side bar -- footer-- and other static persistent content -->
           </div>

       </div>
  </body>
</html>

我想要做的是批量查找并用变量或注释替换#content元素，或者根本不用任何内容。我已经提取了内容并将其存储在与相应HTML文件相同的目录中的文件中。

我可以看到两种基本途径来实现我想要的目标：

将所有文件中的#content替换为我想要的内容。
从页面中提取html并预处理或后处理数据以删除#content元素，然后将修改后的html写入新文件。

注意：有太多文件要逐一执行此操作。

我已经尝试了不同的方法来实现这一点，包括jQuery插件，各种nodejs解决方案，grepWin和Xidel。 Xidel是最有用的，但我还没弄清楚如何使用它来输出所有HTML减去#content。

理想情况下，我想使用$.replaceWith的简单性，即：

$('#content').replaceWith('...');

当然，如果就这么简单，我现在可能会偶然发现它。

有没有人知道这个工具或解决方案？ - 即使它在代码编辑器中提供查找和替换文件功能。这只需要完成一次，因此不需要是程序化的。

修改：这是所需的之前和之后的示例。

之前

<html>
    <head>
        I am content in the head - I should remain as I am
    </head>
    <body>
       <div id="page"><!-- Wrapper for all pages -->
           <div id="header">
               I am a static header - I should remain as I am
           </div>
           <div id="content">
                I am content - I am different on every page.  I would like to be replaced please.
          </div>
          <div>
              I am things like a sidebar, footer, copyright logo.
              I may or may not be wrapped in a div, but I don't need to be changed
          </div>
       </div><!-- End of wrapper -->
    </body>
 </html>

<html>
    <head>
        I am content in the head - I should remain as I am (see I haven't changed)
    </head>
    <body>
       <div id="page"><!-- Wrapper for all pages -->
           <div id="header">
               I am a static header - I should remain as I am (I haven't changed either)
           </div>
           <div id="content">
                I AM VERY DIFFERENT.  The only Thing inside of me is a variable. :)
          </div>
          <div>
              I am things like a sidebar, footer, copyright logo.
              I may or may not be wrapped in a div, but I don't need to be changed
              (Nope.  I haven't changed either)
          </div>
       </div><!-- End of wrapper -->
    </body>
 </html>

Answer 1

我不确定你用@content替换它是什么意思，除非那只是文本，但任何DOM解析器都可以很容易地完成这项工作。如果你可以通过命令行运行一个它，它会很好用，但在Chrome这样的浏览器中也很容易。

使用Chrome打开HTML文档并打开控制台（f12）。运行

var content = document.getElementById("content");
content.parentNode.removeChild(content);

现在，您可以在Elements中的根<html>节点上右键单击并“复制为HTML”，甚至可以使用document.documentElement.innerHTML

在控制台中打印HTML

Answer 2

使用记事本++，

打开要编辑的所有页面，运行一个查找程序并转到替换部分并在所有打开的页面中点击替换。

我想这有助于批量更换。

在多个文件中查找和替换HTML

2 个答案: