How can I easily retab html files according to some sane default?

Question

I have some html files that I'd like to retab that look like this:

<header>
    <div class="wrapper">
                    <img src="images/logo.png">
                    <div class="userbox">
                            <div class="welcome">Welcome Andy!</div>
                            <div class="blackbox">
                                    <ul>
                                            <li><a href="#">Invite Friends</a></li>
                                            <li><a href="#">My Account</a></li>
                                            <li><a href="#">Cart</a></li>
                                            <li><a href="#">Sign Out</a></li>
                                    </ul>
                            </div>
                    </div>
            </div>
</header>

And I want them to look something like this:

<header>
  <div class="wrapper">
    <img src="images/logo.png">
    <div class="userbox">
      <div class="welcome">Welcome Andy!</div>
        <div class="blackbox">
          <ul>
            <li><a href="#">Invite Friends</a></li>
            <li><a href="#">My Account</a></li>
            <li><a href="#">Cart</a></li>
            <li><a href="#">Sign Out</a></li>
          </ul>
        </div>
    </div>
  </div>
</header>

Or some sane default. What's the easiest way to go about doing this from the terminal in ubuntu for all of the html files in the current directory?

Answer 1

In vim:

:set softtabstop=0
:set expandtab
:set smarttab
:set shiftwidth=2
gg=G
:retab

EDIT: Explainations:

• lines 1-3: sane default
• line 4: indent with 2 spaces
• line 5:
  • gg: top line
  • =: indent until...
  • G: ...end
• line 6: insure that all tabs are converted to spaces

Answer 2

sudo apt-get install tidy
cd whatever_dir_you_want
find . -name '*.html' -exec tidy -m {} \;

Note: this probably wont play nice with inline-php. Play around with tidy (without the -m argument) to see how it works.

Answer 3

Are those tabs in the first example and spaces in the next? Here's a shell script that could change tabs to two spaces. Change working directory to location of HTML files.

#!/bin/sh
for i in *.html
do
    sed 's/\t/  /g' "${i}" > filename.notabs && mv filename.notabs "${i}"
done

UPDATE

I just had need to do something similar. I went strait for Komodo Edit's replace-in-files feature. It's very nice if you have GUI access to the files.