Webデザイナーに最低限知っておいてほしい、検索と置換(正規表現)

検索と置換は、IDE（統合開発環境）やコードエディタ、Word、Excel、Keynoteなどの多くのアプリケーションに搭載されています。Webデザイナーの身近なツールであるPhotoshopやIllustratorも簡易的な検索と置換が行えます。

IDEやコードエディタでは「正規表現」というものが使えます。この正規表現がよく分からないWebデザイナーさんも多いようで「最低限でいいから解説してくれ」といわれました。

検索・置換の正規表現を理解しておくと複雑な文字の置き換えも可能になり、HTMLなどの編集の手助けにもなります。また短時間で正確に文字を置き換えるため、人為的なミスも減らせます。

検索と置換

ご存じの方が大半だと思いますが、検索と置換は、その名の通り文字列を検索し、置き換える機能です。 本記事では、オープンソースのエディタである「Adobe Brackets」を中心に解説しますが、ほとんどのIDEやエディタで同じように動作します。

はじめに下記の文章から「ピョコ」を検索し、「pyoko」という文字に置き換えてみましょう。

蛙ピョコピョコ三ピョコピョコ、合わせてピョコピョコ六ピョコピョコ。

Bracketsの[検索]メニューから[置換]を選択。 エディタの上部に検索と置換のボックスが表示されるので、検索の入力エリアには「ピョコ」を入力、置換の入力エリアに「pyoko」と入力し、置換ボタンを押してください。
文字をひとつずつ置き換えられます。

Bracketsの検索と置換

また検索の入力エリアに「ピョコ」を入力し、置換の入力エリアを空にして置換すると、「ピョコ」を削除できます。

文章内の文字を一括で置き換える場合は、バッチボタンから置換を行ってください。 他のエディタでは「すべて置換」や「All Replace」というボタンで任意の文字を置き換えます。

Bracketsのバッチによる置換。チェックボックスから特定の文字を置換から除外できます

Sublime Text 3

Dreamweaver CC 2015

決められたルールの文字を置換（正規表現）

決まったを文字から、別の文字へ置換するのは簡単です。
ただしHTMLなどを修正や整形する時は、複雑なパターンの置換が必要な場合があります。 複雑なパターンごとに検索の文字を変えていては、時間がかかってしまいます。

そこで「正規表現」を利用します。
正規表現は、通常の文字と特殊文字から文字列のパターンを作成し、検索対象の文字列を一致させます。

正規表現を使って、下記HTMLのh1要素を、h2要素に変換してみましょう。

<div class="lv1">
  <div class="lv2">
    <h1>見出し</h1>
    <p>本文</p>
  </div>
</div>

まずは正規表現を有効にします。
Bracketsに置換のボックスを表示し、[.*]ボタンを有効にします。 （Dreamweaverなどは「正規表現を使用」というチェック項目があります）

正規表現の利用。[.*]ボタンを有効にする。

そして検索ボックスに下記の正規表現を入力してください。

<h1>(.*)</h1>

そして置換ボックスには下記の文字を入力してください。
置換してみましょう。h1要素が2要素に置き換わります。

<h2>$1</h2>

まず疑問に思うのは「(.*)」という記号でしょう。
検索ボックスで入力した「(.*)」は、「メタ文字」と呼ばれる正規表現の特殊文字です。このメタ文字には、それぞれの意味があります。

  • 「()」は、一致した文字列を記憶します。また()を使用して記憶した文字は、$1から$9を使って呼び出すことができます。
  • 「.」は、改行以外のすべての1文字に一致します。
  • 「*」は、直前の文字を0回以上、一致します。

そのため、検索ボックスに入力した「<h1>(.*)</h1>」という文字は、

『<h1>と</h1>の間に、 改行以外の文字列が[.]、0回以上[*]の文字列があれば、記憶[()]して検索に一致させる』

という意味です。

そして記憶した文字列を呼び出す時は、「()」に対応した$1から$9までの記号を使用します。

今回は検索ボックスで記述した「()」の数が1つしかないので、$1を利用して置換ボックスから呼び出します。

置換ボックスに入力する文字

<h2>$1</h2>

検索ボックスと置換ボックスに入力した様子

もし複数の「()」を利用した場合は、「()」に対応した$1から$9を使用します。
また「()」の中は、必ずしもメタ文字でなくも構いません。通常の文字を記憶して$を使用して移動できます。

正規表現を使った文字の移動

状態 内容
置換前の文字 <h1>HTML</h1>
検索ボックスに入れる文字 <h1>(H)(.)(.*)</h1>
置換ボックスに入れる文字 <h2>$3$2$1</h2>
置換後の文字 <h2>MLTH</h2>

置換前の文字と検索、置換の対応

特定の文字からHTMLを作成

(.*)と$による呼び出しを覚えれば、様々なことに応用ができます。 下記の文字から、HTMLのリストを作成してみましょう。

Google  https://www.google.co.jp/
Yahoo!  http://www.yahoo.co.jp/
Bing  https://www.bing.com/
Yandex  https://www.yandex.com/
百度  http://www.baidu.com/

用意した文字は「タイトル」「スペース1つ」「URL」というルールになっています。タイトルとURLを(.*)に置き換えて検索し、li要素とa要素に置き換えます。

例

置換前の文字

Google  https://www.google.co.jp/
Yahoo!  http://www.yahoo.co.jp/
Bing  https://www.bing.com/
Yandex  https://www.yandex.com/
百度  http://www.baidu.com/

検索ボックスに入れる文字

(.*)  (.*)

置換ボックスに入れる文字

<li><a href="$2">$1</a></li>

置換後の文字

<li><a href="https://www.google.co.jp/">Google</a></li><br>
<li><a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a></li><br>
<li><a href="https://www.bing.com/">Bing</a></li><br>
<li><a href="https://www.yandex.com/">Yandex</a></li><br>
<li><a href="http://www.baidu.com/">百度</a></li>

検索する文字のルールが決まっていれば、HTMLに起こすのも容易です。

正規表現で特定の要素を削除

次はWebサイトのリニューアルで、HTMLを流用するケースを考えてみましょう。
HTMLに不要なspan要素が入っており、そのままでは流用しにくい場合があります。
下記のHTMLからspan要素を削除してみましょう。

<p>彼らは今日よしこうした<span class="color">専攻方</span>というののためでしありで。もし場合を接近らもまあその仕事でだろくらいにしからいですがも遠慮叱らないうて、あまりには暮らしななけれたませ。</p>
<p><span class="color" align="left">演壇</span>に取り消せだろのはたしか事実をとうとうないないで。</p>

span要素を削除する正規表現

検索ボックスに入れる文字

<span.*>(.*)</span>

置換ボックスに入れる文字

$1

span要素の属性（<span class="color" align="left">）を、「.*」を使って一致させます。「()」の中に入れていないのは削除させる文字なので、記憶させる必要がないためです。
そして「(.*)」を利用してspan要素の中の文字を記憶し、置換で記憶した文字だけに置き換えています。

次にもう少し難しい例をあげましょう。

<p>彼らは今日よしこうした<span>専攻方</span>というののためでしありで。もし場合を<span>接近</span>らもまあその仕事でだろくらいにしからいですがも遠慮叱らないうて、あまりには暮らしななけれたませ。</p>

上記のHTMLは、ひとつのp要素の中にspan要素が2回出現しています。
今回のspan要素にはclass属性がないので、属性を単純に削除した正規表現（<span>(.*)</span>）で検索を行いましょう。
ただし検索の結果は、期待したものとは異なるはずです。

Bracketsで検索ボックスに「<span>(.*)</span>」といれた例

これは「.*」が改行以外の文字に連続して一致するために、行の中の最初に出現した「<span>」から最後に出現する「</span>」までが一致してしまいます。 span要素ごとに検索するには、「?」のメタ文字を使います。

「?」は、直前の文字の0回、または1回に一致します。

これを使い、正規表現を下記のようにするとspan要素ごとに一致します。

検索ボックスに入れる文字

<span>(.*?)</span>

Bracketsで検索ボックスに「<span>(.*?)</span>」といれた例

正規表現でHTMLの属性を置き換える

「?」はHTMLの属性を変更する時にも活躍します。 例えば下記の例で、href属性に拡張子を付与したい場合。

<a href="./about" class="about">About</a>
<a href="./contact" class="contact">Contact</a>

検索ボックスに「href="(.*)"」と入力するとclass属性まで一致してしまいます。

Bracketsで検索ボックスに「href="(.*)"」といれた例

「?」を利用することで、href属性の閉じるダブルクオーテーションで終わらせ、意図する文字に置き換えることができます。

例

検索ボックスに入れる文字

href="(.*?)"

置換ボックスに入れる文字

href="$1.html"

置換後の文字

<a href="./about.html" class="about">About</a>
<a href="./contact.html" class="contact">Contact</a>

Bracketsで検索ボックスに「href="(.*?)"」といれた例

1行で連続する文字を検索するには、場合に応じて「?」を使いましょう。

意図しない文字が正規表現で置き換わる

置き替えたい文字列にメタ文字が使われていると、そのままでは意図した文字の置き換えられません。
例えば以下のような例です。

  • 「* これは注釈です」の「*」を削除する
  • 「日本語(にほんご)」のカッコにsmall要素を追加する
  • CSSファイルに「#css-style」「.css-style」があり、クラスセレクタだけにマッチさせたい

試しに「* これは注釈です」のような文字の「*」を削除してみましょう。
検索ボックスに「* (.*)」と入れて一致させようとしますが、一致する文字はないとエラーが出ます。

Bracketsで検索ボックスに「* (.*)」といれた例

正規表現を有効にした状態の「*」は、メタ文字としてみられ、検索する文字の対象から外れてしまいます。
「*」などのメタ文字を検索する文字の対象にするには、メタ文字の直前に「\」を置きます。 「\*」「\.」などとすることで、正規表現のメタ文字は通常の文字として扱われます。

Bracketsで検索ボックスに「\* (.*)」といれた例

むすび

正規表現を覚えると、地味に面倒臭いことをすべて機械（エディタ）に任せることができます。
「全角数字を一括で半角数字にする」や「10000円などの金額に桁区切りのコンマをつける」などの面倒なことを、正規表現を利用することにより、一瞬で置き換えることができます。

今回は「()」「.」「*」「?」「\」の5つのメタ文字を覚えました。
HTMLなどの文字の置き換えは、これらのメタ文字でだいたい何とかなるはずです。これらの使い方を反復するだけで正規表現がどのようなものか理解できるでしょう。

5つのメタ文字に慣れてきたら、その他のメタ文字も覚えてみましょう。行頭、行末一致や半角数字のみに一致、否定などもできます。
簡単な内容は、Microsoft Developer Networkの正規表現の構文が参考になります。

関連