RubyのHpricotでHTMLを自動整形

ruby

カッとなってまたRubyさわった。


仕事上HTMLのパーツを一覧にしたページを良く作る。（僕らはそれをモジュール一覧と呼んでいる。）
そんでもって今見ているパーツのソースを抜き出そうと思うと色々問題が起きる。

  • 目の前のパーツがソースのどこか分かりづらい（数千行とかだとほら。。。）
  • FireBugを使うとjavascriptであてたstyleやらclassやらが入ってしまう。
  • FireBugを使うと<br />が<br/>だったりで気持ち悪い。

それじゃーっていうんで各モジュールをdiv.modとかで包んでjavascriptでその要素の次にtextarea作ってそこに放り込んでみた。
一応それで結構使えるんだけど、、

  • やっぱりjavascriptであてたstyleやらclassがはいってしまう
    • replaceしちゃえばいいんだけど個別に色々あったりすると結構めんどい。
  • IEで綺麗にソースをはかないっていうか使い物にならない。

って感じで身内では使えるけど納品するわけにはいかなかった。


で、ずっとやろうと思ってたことをやってみた！！


rubyで元になるHTMLを読み込んでdiv.modの中身をエスケープしてtextareaに吐き出す！

hpricot使ったのでまずはgemでインストールを。

※ 結構時間かかるかも。

gem install hpricot

でソースコードはこんな感じ

require 'rubygems'
require 'hpricot'
target = open("test.html","w")
doc = Hpricot(open("modules.html","r"))

doc.search("div.mod").each{|elem|
  elemHtml = elem.inner_html.to_s
  elemHtml.gsub!("&","&amp;");
  elemHtml.gsub!("<","&lt;");
  elemHtml.gsub!(">","&gt;");
  elem.after("<textarea class=\"mod\" rows=\"5\" cols=\"80\" readonly=\"readonly\">"+elemHtml+"</textarea>")
}

target<<doc.to_html


やばいね！超楽しい！

っていうかこれさ諸々htmlのクラス名だけ決めてマークアップしてモジュールのルールとかをrubyに書いて最後に全ページ一括で整形とかできるね。
やべぇ夢が広がる！

参考：http://mono.kmc.gr.jp/~yhara/rubyscraping/?Hpricot%2FShowcase