title: Find and replace HTML accross multiple files
body: <p>I'm working on cleaning up and implementing a custom built content management system for a website.  All pages on the website are simple, and essentially static, HTML pages built as a simple template that is something like the following:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;&lt;!-- resources, scripts, etc. --&gt;&lt;/head&gt;
  
      &lt;body&gt;
  
         &lt;div id="page"&gt;
  
             &lt;div id="header"&gt;&lt;!--- static --&gt;&lt;/div&gt;
  
             &lt;div id="content"&gt;
                  &lt;!-- The main content - different on every page --&gt;
             &lt;/div&gt;
  
             &lt;div&gt;
               &lt;!-- Side bar -- footer-- and other static persistent content --&gt;
             &lt;/div&gt;
  
         &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want to do is batch find and replace the <code>#content</code> element with a variable or a comment or nothing at all.  I've already extracted the content and stored it in a file in the same directory as the corresponding HTML files.</p>
  
  <p>I can see two basic pathways to accomplish what I want:</p>
  
  <ol>
  <li><p>Replace the <code>#content</code> in all the files with what I want.</p></li>
  <li><p>Extract the html from the pages and either pre or post process the data to remove the <code>#content</code> element, and then write the modified html to a new file.</p></li>
  </ol>
  
  <p><strong>Note</strong>:<em>There are too many files to do this one by one.</em></p>
  
  <p>I've experimented with different methods to do this, including a jQuery plugin, various nodejs solutions, grepWin, and <a href="http://videlibri.sourceforge.net/xidel.html" rel="nofollow" title="xidel">Xidel</a>.  Xidel was the most useful, but I've not figured out how to use it to output all the HTML minus the <code>#content</code>.</p>
  
  <p>Ideally, I'd like to do with the simplicity of <code>$.replaceWith</code>, i.e.:</p>
  
  <pre><code>$('#content').replaceWith('...');
  </code></pre>
  
  <p>Of course, if it was that simple, I probably would've stumbled across it by now.</p>
  
  <p>Does anyone know a tool or a solution for this? - even if it is within a code editor that offers find and replace in files functionality.  This only has to be done once, so it doesn't need to be programmatic.  </p>
  
  <p><strong>Edit</strong>:<em>This is an example of the desired before and and after scenario.</em></p>
  
  <p><strong>Before</strong></p>
  
  <hr>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          I am content in the head - I should remain as I am
      &lt;/head&gt;
      &lt;body&gt;
         &lt;div id="page"&gt;&lt;!-- Wrapper for all pages --&gt;
             &lt;div id="header"&gt;
                 I am a static header - I should remain as I am
             &lt;/div&gt;
             &lt;div id="content"&gt;
                  I am content - I am different on every page.  I would like to be replaced please.
            &lt;/div&gt;
            &lt;div&gt;
                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
            &lt;/div&gt;
         &lt;/div&gt;&lt;!-- End of wrapper --&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <h2><strong>After</strong></h2>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          I am content in the head - I should remain as I am (see I haven't changed)
      &lt;/head&gt;
      &lt;body&gt;
         &lt;div id="page"&gt;&lt;!-- Wrapper for all pages --&gt;
             &lt;div id="header"&gt;
                 I am a static header - I should remain as I am (I haven't changed either)
             &lt;/div&gt;
             &lt;div id="content"&gt;
                  I AM VERY DIFFERENT.  The only Thing inside of me is a variable. :)
            &lt;/div&gt;
            &lt;div&gt;
                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)
            &lt;/div&gt;
         &lt;/div&gt;&lt;!-- End of wrapper --&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>