Question

There has been times where I need to “convert” an old HTML structure to a new one. To illustrate, converting this:

<!-- Old HTML structure. -->
<div class="class-a">
  <div class="class-b">
    <span>Hello</span>
  </div>
  <div class="class-c">
    <p>How are you doing?</p>
  </div>
</div>
<div class="class-a">
  <div class="class-b">    
  ... (and so on, basically repeats the construct above) ...

To something like:

<!-- New HTML structure. -->
<div class="class-aa">
  <span class="class-ab">Hello</span>
  <p>How are you doing?</p>
</div>
<div class="class-aa">
  <span class="class-ab">Hi!</span>
  ... (and so on, basically repeats the construct above) ...

Note that I still need the text, but the structure needs a complete overhaul.

The worst situation is the HTML file is super long and doing it manually (yep, a lot of typing). What I’ve been doing so far is either using a simple substitution regex (if not too complex) or resorting to the old school vi macro.

Would somebody please suggest a better approach to accomplish this?

Answer 1

You could write a JavaScript/jQuery that does the restructuring and then use the DOM inspector/debugger of the browser get a copy of the modified HTML.

BTW, a while ago I was looking for a editor/tool that does this kind of thing automatically, but there doesn’t seem to be such a thing: https://softwareengineering.stackexchange.com/questions/79615/html-text-editor-with-dom-manipulation