Commenting div closing automation

Question

I'm looking for a solution to a rats nest of code I was handed - it's massive in volume, so I'm looking for suggestions to a programmatic approach to commenting what div closes where.

Example:

BEFORE

<div id="wrapper-item">
<div id="outer-item">
    <div class="inner-item">
<h1>Just Some Placekeeper Copy</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
    </div>
</div>  
</div>

AFTER

<div id="wrapper-item">
<div id="outer-item">
    <div class="inner-item">
<h1>Just Some Placekeeper Copy</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing.</p>
    </div><!-- .inner-item -->
</div><!-- #outer-item -->      
</div><!-- #wrapper-item -->

I tried a few Regex attempts with no joy, I'd be curious of what the best approach is..

Answer 1

If it is valid xhtml, then you could just put it in an XML Document and then proceed to process the div tags by finding all of them, then adding a sibling that has the comment node that you want.

Answer 2

A solitary regular expression might work, but it might be better to write a program that is enhanced by regular expressions. Get the text between < div id=" and >, then add that in a list or stack, and link it, in order, with an int index. Continue scanning it and upon finding a '' tag, pop the newest text on the stack, and format it to become a comment.

Answer 3

I just use a script to properly indent the HTML so I can check at a glance if all tags are closed properly -- the indenting correctly comes back to touch the left margin. To check what opening matches what closing I use a folding text editor like SciTe or Komodo Edit so I can browse the properly indented code by opening and collapsing sections.

If anybody is interested in the indenting script (written in tcl) I can upload it somewhere. Alternatively you can try using something like HTMLTidy to do the formatting.

Answer 4

You can use a XML/DOM API for a particular language and play with how it handles Comment Objects. For example, Python -- http://docs.python.org/library/xml.dom.html#comment-objects

Answer 5

<div>whatever</div>
<!-- this comment is already deprecated -->

Just use a decent editor that highlights the start/end tag. Even NotePad2 does this. Most editors can also select tag and contents, or just contents. Many editors will also reformat the html for you (if you dare).

Commenting the end of the tag is going to get out of sync and be even harder to follow for you or your coworkers.

If you do end up successfully adding redundant comments to every div, span, p, ul, etc tag, I think you'll find the code is even more bloated and unreadable.