正規表現を使った置換ではてなブログのソースクリーニングを効率的に行う

こんにちは、くみです。

何故か分からないのですが、はてなブログをブラウザで更新しているとspanのstyleとかの意図しないソースがたくさん混入します。また外部リンクを貼る時にtarget属性をつけてくれないので、ほしい時は自分で付け足さないといけないです。

手作業で直すとかなり時間がかかるのでいつもテキストエディタ正規表現を使って置換しているのですが、シェアしたら誰かの役に立つかもしれないなと思ったので自分メモしますね。

私の使っているエディタ

私はMac OS 8の時代からミミカキエディット(現在はmi)ユーザです。ワードカウントもできるし正規表現も使えるし、CSSやHTML・Perl等のモードによって構文に色を付けてくれたりもするので、今のところ特には困っていない…

Windows環境ではTeraPadを主に使っていましたが、TeraPad正規表現使えなかった気がする。

何使ってたっけ…思い出せない…Sakura Editorとか秀丸とかかなあ。

こしあん先生にEmacsもしくはviを勧められているのですが、なかなか使いこなせていません(;´Д`) プログラマの素養がないという事なのかなーー

正規表現とは?

正規表現(せいきひょうげん、英: regular expression)とは、文字列の集合を一つの文字列で表現する方法の一つである。

正規表現 - Wikipedia

正規表現自体を知らない人も、ワイルドカードは知っているんじゃないかな。
*が任意の文字列を表すというものです。例えばapp*で検索するとappleapplicationなどが該当するという。

正規表現ワイルドカードとは違うんですが、同様にそういう集合体を効率よく表現する規則だと思えば想像しやすいでしょうか。

正規表現のルール自体はプログラミング言語やアプリケーションで少しずつ違うみたいで、この記事ではmiを使った正規表現について書きます。ご自分の環境がどういうルールになっているかはご確認ください〜。

miの正規表現(一部)

miの正規表現は以下に載っています。

私がよく使うやつはこんな感じです。

  • .:改行コード以外の任意の一文字
  • *?:0回以上(最短一致)
  • ( ):グループ($1、$2などで指定)
  • \r:改行

.*?と組み合わせる事で任意の文字列の最短一致になります。
例えば、<a href=".*?">.*?</a>とする事でリンクタグを貼った部分を指定できますね。<a href="(.*?)">(.*?)</a>とグループ化すれば、後で$1でリンク先URL、$2でリンクタグをかけた文字列を呼び出すことができます。
(HTMLだと最長一致を使うとタグを突き抜けてしまうので最短一致を使ってます)

グループ指定は最初慣れないかもしれないけど、使えるようになるとタグだけ消して地の文を残したりなどHTMLのようなマークアップ言語での応用が結構効くので便利ですよ。

文字範囲指定とか使いこなせればもっと世界が広がるんだろうけど、この程度でも出来る事たくさんありますね。

私がやっている正規表現を使ったはてなブログのソース置換

では具体的に私が何で使っているかを説明しますね〜。
miは検索すると該当箇所を色付き表示してくれるので、自分の予想してなかった部分まで適用されちゃう、という事を防げます。基本は一括置換ではなく1つずつ。それでも手作業よりずっと早いです。(慣れてきて間違わないし例外箇所もない、という事であれば一括置換もよしです)

意図しないstyleを除去

はてなブログ、なぜかこちらが指定してないspan styleをたくさんつけます…
<span style="line-height: 1.5;">とか。line-height: 1.5くらいならそんなに悪さしないから残しておいてもいいんだけど、なるべくソースはきれいにしたいし。
外からコピペしてきたものとか、ちょっと発生条件はよく分からないんですがたまに下記のような長いstyleを付けられることもあります。

<span style="color: #000000; font-family: 'Helvetica Neue', Helvetica, Arial, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 24px; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; display: inline !important; float: none; background-color: #ffffff;"></span>

うっうわああああああああ………なんじゃあこりゃああ………

それも文章毎にではなくて一文字ごとにかけられたりするんで、ソースがカオスになります(;´Д`)

除去する正規表現
  • 検索:<span .*?>(.*?)</span>
  • 置換:$1

これでspanタグまるごと除去できて、地の文だけが残ります。例えば『<span style="line-height: 1.5;">テスト</span>』だと『テスト』だけが残ります。

注意点としては自分で設定したspanタグ(style="color: #0000cc;"とか)も除去しちゃうので、そういう部分がある場合は一括置換せずに1つずつ様子を見ながら置換しないとですけど。あとヨメレバやAmazonアソシエイトで作ったタグを改変しないようにとか。

aタグの中にstyleを勝手に書かれたりしてこれでは消えない時もあるんですが、 styleだけ消したい時は

  • 検索: style=".*?"
  • 置換:

で。変な半角スペースが残らないよう注意です。

line-heightを勝手に付けられるのが嫌だというように狙いが定まっている場合は

  • 検索: style="line-height: .*?;"
  • 置換:

とかかな。これもスペース注意。あと<span></span>だけ残ったりするので、このあと<span>(.*?)</span>$1に置換してspanの空タグを消したりします。

<br />を<p> </p>に置換

他から持ってきた文章をコピペしたら<br /> でずっと続いちゃってるけど、段落分けしたい…という時に。
<br /><br />と改行が続いている部分で段落分けするとすると、私だと

置換の正規表現
  • 検索:<br /><br />
  • 置換:</p>/r<p>

としてるかなあ。それで手動で頭に<p> とおしりに</p>をくっつけますね。
途中で改行(/r)挟むのはソースを見やすくするためです。
元ソースに例えば<br /><br />のあとにもう改行が入っていてこの置換だと改行がおかしくなる場合は、検索の方に適切に/rをかましてあげてください。

リンクタグにtarget="_blank"を追加

はてなブログはリンク貼る時にtarget属性をつけてくれないので、一個二個なら手書きペーストしてますが、多い時は面倒なのでエディタで処理をしてます。

 target属性を追加する正規表現
  • 検索:<a href="(.*?)">
  • 置換:<a href="$1" target="_blank">

これで、リンクタグにtarget="_blank"が追加されます。

外部生成のタグだとたまにtarget="_top"target="_blank"が既に入ってたりするので、一括置換はせず1つずつ置換してあとでtarget="_top"を一括消去したりしてます。

なんか他にもあった気がするので、思い出したら追記しますね。

はてなブログのバグ(バグなのか仕様なのか分からないですが…)が改善されたらこんな小技も要らなくなるんだと思いますが、正規表現はHTMLだけではなく全てのテキストで応用できるので、少しでも使えるようになって損はないんじゃないかと思ってます。
何かのお役に立ったら幸いです。

 

▼この本、私は買っていないけど目次(http://www.h-fj.com/blog/regexbook/)を見る限り初めての人にもオススメできそう。

はじめての正規表現 for Web Creator[Kindle版]

藤本 壱 藤本 壱 2013-03-02
売り上げランキング : 7851
by ヨメレバ

▼これは難しいニオイがする…

詳説 正規表現 第3版

Jeffrey E.F. Friedl オライリージャパン 2008-04-26
売り上げランキング : 175850
by ヨメレバ

はてなブログカスタマイズ関連記事


はてなブログのスマートフォン版にカテゴリー選択のプルダウンメニューを追加しました - @kum_i log


はてなブログ用Twitter貼り付けブックマークレット作成を試みる(不完全→完全体!!) - @kum_i log


iPhoneの写真が勝手に回転している事に悩まされた話(解決策あり) - @kum_i log


ATOMフィードを設置しました - @kum_i log