Editing HTML structurally

Question

Recently I've done a lot of work cleaning up some HTML files that were generated by LibreOffice. It made me really wish for a way to edit the document structure, à la paredit-mode.

For example, for some reason LibreOffice rendered one particular ordered list like this:

<ol>
  <li>...</li>
</ol>
<ol start="2">
  <li>...</li>
</ol>
<ol start="3">
  <li>...</li>
</ol>
<!-- etc -->

I would have loved a way to put the point somewhere in the first ol and issue a command analogous to paredit-forward-slurp-sexp to pull the content of the second list into the first, and then repeat for all the remaining lists.

As another example, I also needed to insert some breaks in a set of nested divs:

<div class="foo">
  <div class="bar">
    ...
    <-- point is here
  </div>
</div>

I wished I could issue a command analogous to paredit-split-sexp twice to get this:

<div class="foo">
  <div class="bar">
    ...
  </div>
</div>
<-- point is here
<div class="foo">
  <div class="bar">
  </div>
</div>

Does such a thing exist?

score 6 · Accepted Answer · answered Aug 22 '15 at 23:07

Tagedit is what you want.

From the README:

tagedit-forward-slurp-tag moves the next sibling into this tag.
tagedit-forward-barf-tag moves the last child out of this tag.
tagedit-raise-tag replaces the parent tag with this tag.
tagedit-splice-tag replaces the parent tag with its contents.
tagedit-join-tags combines two tags into one, prompting for tagname if they differ.
tagedit-split-tag splits a tag into two.
tagedit-convolute-tags switches the parents of the current tag, along with previous siblings.
tagedit-kill kills to the end of the line, while preserving the structure.

Editing HTML structurally

1 Answers1