WebStormの正規表現を使った置換が便利すぎる件

通常の検索置換では無理、、、手動だと時間がかかる・・・そんな時に!

コーディングしていると、時々「これ面倒・・・」「自動で処理できないかな」と思う時があると思います。例えばそういう時に秀丸のマクロもかなりそういう時に威力を発揮します。今回は、正規表現を使って楽しよう!というお話です。

正直、正規表現わからん・・・そんな人も分かるように実践紹介となってます

実はサルでも分かる正規表現というWebページがあるのですが、僕は解りませんでした。解らないというよりも必要性が伝わりませんでした。なので、伝えることは一気に狭くなりますが、ここは鉄板の実践紹介です。

<問題> animalをpetに、SectionをBlockに「同時に」「一度に」置換せよ

置換前

<section class="animalLionSection"></section>
<section class="animalCatSection"></section>
<section class="animalDogSection"></section>

置換後

<section class="petLionBlock"></section>
<section class="petCatBlock"></section>
<section class="petDogBlock"></section>

実務でこうゆうケースがあるかどうかは解りませんが、これは、検索・置換では成し得ません。この量であれば、一つ一つコピペで書き換えることも可能ですが、大量のコードの場合もありますので、自動で処理しないと日が暮れてしまいます。さて、どのようにするでしょうか。

<回答> 正規表現でカンタン自動処理!

正規表現を利用するためには、Regexにチェックボックスを入れておきます。

まずはanimalを入力する。すると、通常の検索と同じように入力した文字にヒットします。

その次に、「.」ピリオド(ドット)を追加してみます。すると、一文字分範囲が広がりました。実は、この記号は「1文字」という意味を持っています。補足ですが半角スペースは除く1文字です。

その後、「+」プラスを入力します。すると、animal以降の全ての文字がヒットしました。この記号は、その前の文字を「1文字以上連続」する意味を持っています。だから、以降がヒットしたんですね。

その後「Section」を入力すると、animal~Sectionの~部分が、3行で異なるにも関わらずヒットされることが出来ました。これも、通常の検索では、成し得ないことです。
意味としては,animalが先頭にあり、半角スペース以外の文字が1文字以上連続していて、Sectionで終わる文字をヒットするということになっています。

ここで、animalをpetに、SectionをBlockに置換したいので、置換する言葉を入力します。しかし、これだと、全てがLionになってしまいます。

そこで!丸括弧を利用します。これは、置換する処理の時に、囲んだ文字を保存しておくことが出来ます。保存した文字は、置換する文字の中で、$1で呼び出すことが出来ます。

すると、置換成功しました。パチパチパチパチ。

応用するとこんなことも・・・!

応用すると、class名と同じid名をつけることも同時に出来ます。まずは、さっきの容量でpet〜Blockを検索します。

置換すると、ご覧の通り。

まとめ

「作業は、基本1瞬」

手動で時間のかかるものをやらなければならない時もありますが、そうなると遅い。このテクノロジーが発達した時代、面倒なことは自動化できるように既に先人が考えてくれています。その恩恵を知らずして、生産性のないことを行うのは、もはや罪です。高速で正確な作業をするためにも、自動化を考えるのが常です。人が3時間かかるものを3分でより正確で出来たら、とても価値のあることです。給与が上がってもいいくらいですね(w

秀丸のマクロもそうですが、検索置換だけでは出来ない領域があり、手動でやると時間もかかるし、ミスもでやすい作業がたまにあります。そういう時に、正規表現は使えますし、もちろんJavaScriptやサーバーサイドの実装でも利用できます。とても、便利なので一度試してみては。

参考文献