md : Web Design : miのTips : 正規表現と便利ツール

正規表現と便利ツール

Download

HTML+CSSTool_ver0.3.lzh

http://homepage.mac.com/mikihiro/FileSharing.html
StuffIt Expanderでは、lzhファイルの解凍に不具合がでます。lzhは、LHA Expanderなどで解凍して下さい。

解凍後、miのモードフォルダの中の、toolフォルダに必要なものを入れて下さい。

<>→<>
タグ消去
行末スペース削除
；：スペース挿入
；：前のスペース削除：後に挿入

という、5つのファイルがあります。最後の2つは、どちらか片方を使えば充分です。

HTML・CSSを整形する正規表現

HTML・CSSを書くのにとても便利な、テキストエディタmi。これの便利な使い方をまとめます。

手作業で書いていると、どうしても文の統一感が失われます。細かなことですが、文を整えることで見やすくなり、ミスを減らすことに繋がります。

正規表現の検索・置換をかけることで、整形できます。また、これらをツールにまとめて選択した部分に一発で適用することができます。

HTML+CSS共通　行末半角スペース削除

+$

この正規表現で行末半角スペースを検索できます。+の前にスペースが入っています。置換文字列には何も書かず、置換で削除します。

空白を空ける処理

CSSの書き方を整えます。";"の前と、":"の前後に空白を空ける処理をします。
例えば、"color:black;"→"color : black ;"にすることを、以下、例にします。

CSS　";"の前に空白を空ける処理

次のように正規表現を使う事によって、検索・置換で
(\S);$　で、"k;"を検索選択し、
$1 ;　で"k ;"に置き換えます。

これで、"black"と";"との間にスペースを入れます。また、逆に、スペースを削除することで統一するのでも良いでしょう。
（私がスペースを入れていた理由は、自作のmi用モードファイルで、"black"をmiがキーワードと認識する事ができるようするためでした。）
@charset "Shift_JIS";　←は、";"の前にも空白が空いてしまうので、注意。

CSS　":"の前後に、空白を空ける処理

"(\S):"　で、":"の前に空白がなければ、その一字と":"とを選択します。
また、a:hoverなどを選択しないように、 "link　visited　hover　active　focus　lang　first-child　before　after"が、":"のすぐ後にある場合は選択しません。(?!)は、後続指定（不一致）です。

http://homepage.mac.com/mikihiro/のような"://homepage"の前にもスペースを入れてしまうのに、注意。

":"の後に空白が無ければ、":"を選択します。上のと違い、afterの後に、"| "を入れて、":"の後にスペースが続くものは一致しないようにしています。
これを、": "で置換します(":"の後に、スペースが入っています。)

http://homepage.mac.com/mikihiro/のような"http:"の後ろにもスペースを入れてしまうのに、注意。

検索・置換の正規表現をツールにする

以上の正規表現をもとに、ツールにまとめるとこうなります。

<<<REPLACE-REGEXP-SELECTED
 +$

<<<REPLACE-REGEXP-SELECTED
(\S);$
$1 ;
<<<REPLACE-REGEXP-SELECTED
(\S):(?!link|visited|hover|active|focus|lang|first-child|before|after)
$1 :
<<<REPLACE-REGEXP-SELECTED
:(?!link|visited|hover|active|focus|lang|first-child|before|after| )
:

< >を置き換えるツール

< >の括弧をさくっと、< >に置き換えるツール

<<<REPLACE-REGEXP-SELECTED
<
&lt;
<<<REPLACE-REGEXP-SELECTED
>
&gt;

タグ消去

<>で囲まれた部分を消去します。

<<<REPLACE-REGEXP-SELECTED
<[^>]+>

CSS　";"と":"の前の空白を削除　":"の後に空白を挿入

これは、上のCSS整形とは別のものになります。"color :black ;"→"color: black;"のように整形するツールです。