トップ > 制作・開発 > 一括置換は正規表現知らなきゃソンソン!
制作・開発

一括置換は正規表現知らなきゃソンソン!

一括置換は正規表現知らなきゃソンソン!

こんにちは、フロントエンドの、のりこです。
今回はちょっと肩の力を抜きまして、簡単な正規表現のお話です。

まず、正規表現が使用できるテキストエディタを準備します。
私は普段秀丸をつかっているのですが(マクロを使って置換ができるので)秀丸の正規表現は若干セオリーが違ったりしますので、DreamWeaverやSublime Textなどで使用できる書き方を使って説明して行きます。

例えば、下記のソースを

<p class="red">おはよう</p>
<p class="blue">おやすみ</p>
<p class="yellow">こんにちは</p>
<p class="green">こんばんは</p>

classを取り払った上で<li>タグに書き直そうと思います。

<li>おはよう</li>
<li>おやすみ</li>
<li>こんにちは</li>
<li>こんばんは</li>

今回はDreamweaverで、以下のように書いてみました。
正規表現例

検索文字列→ .+”>(.+)<.+
置換文字列→ <li>$1</li>

.(ピリオド)
全ての文字、一文字に相当します。
.+(ピリオドプラス)
で連続する全ての文字列という意味、ワンセットで使うことが多いので覚えましょう。
次に書かれている“>を見つけるまでマッチします。
なぜ”をつけているかと言うと、正規表現でマッチする文字は後ろが優先になっちゃうからなんですね。
だから”がないと</p>の後ろの>が引っかかっちゃうわけです。

“>を見つけたらその次の
(.+)(括弧つきピリオドプラス)
.+(ピリオドプラス)は先述のとおりですが、括弧がついています(半角ですヨ)。
この括弧は、ここテストに出るから覚えておくように~!じゃないですけど、置換のほうでそのまま流用できるように覚えさせておくことができます。
次に指定している文字列<を見つけるまでマッチします。
その後は置換に必要がないので.+(ピリオドプラス)でそこから後ろ全部!ってざっくり指定しちゃってます。

置換のほうは、あらかじめ検索時に()でくくった文字列を
$1の場所にそのまま放り込んでくれます。
()が二つ以上ある場合、先頭から順に$1、$2、$3・・・・
とナンバリングされていきますヨ。

検索文字列が数値で、その数値をそのまま放り込みたい場合は
(\d+)
\dで任意の半角数字一文字、それの繰り返しで数値が終わるまでを記憶させたり
([a-zA-Z0-9]+)
半角英数字全部の繰り返しを記憶させる
などと色々な書き方ができますので、興味が湧きましたら他の書き方も調べてみてはいかがでしょうか?

[2014/11/30追記]

もうちょっとサンプルがあったらいいな♪の声にお応えして、テキストで来た日付のフォーマットを変えてhtmlで使用したいときなどに使える日付変更用置換サンプルをご用意しました。

検索文字列→ (\d+)/(\d+)/(\d+)\s+(.)
置換文字列→ $1年$2月$3日($4)

正規表現2
新しく\sが出てきました。
\sはホワイトスペースを意味し、スペース一個やタブ一個分
\s+でタブやスペースが混じったものの連続
を検出できますので便利ですね♪

javascriptやphpで、その場で動的に正規表現でソースを置き換えたりすることも可能なので覚えなきゃソンソン!



ども
etekichi
etekichi's tail
etekichi's banana

いんふぉま~しゃる