コピペでOK！ コーダーが使えると便利な正規表現を試してみよう！

• Web Create
• 2016.10.12

正規表現とは？

「正規表現とは」で検索すると、なんだか難しい説明が出てきます。
これはそもそも「何か」を説明するのが難しいからかもしれません。

数学では自然数はすべて「n」とされます。
それと同じような理屈で、正規表現では色々な文字列を、
特定のアルファベットまたは記号で表現します。

これをメタ文字と言います。

どんなことができるのか？

例えば下記のように使うことができます。

置換前

パーカー|AB0001|¥30,000|http://example.com/01/
Yシャツ|AB0002|¥8,000|http://example.com/02/
Tシャツ|AB0003|¥3,000|http://example.com/03/

このようなテキストを正規表現で…

置換後

<dl>
  <dt>パーカー</dt>
  <dd>AB0001</dd>
  <dd>¥30,000</dd>
  <dd><a href="http://example.com/01/">BUY</a></dd>
</dl>
<dl>
  <dt>Yシャツ</dt>
  <dd>AB0002</dd>
  <dd>¥8,000</dd>
  <dd><a href="http://example.com/02/">BUY</a></dd>
</dl>
<dl>
  <dt>Tシャツ</dt>
  <dd>AB0003</dd>
  <dd>¥3,000</dd>
  <dd><a href="http://example.com/03/">BUY</a></dd>
</dl>

一瞬でこのように整形！　手作業でタグを打ったわけじゃないですよ。

置換に使った正規表現

//検索文字列
(.*?)\|(\w{2}\d{4})\|(¥\d+,\d+)\|(https?://[\w/:%#\$&\?\(\)~\.=\+\-]+)

//置換文字列
<dl>
  <dt>$1</dt>
  <dd>$2</dd>
  <dd>$3</dd>
  <dd><a href="$4">BUY</a></dd>
</dl>

正規表現を使ってみよう

まずはコピペで使ってみよう

百聞は一見にしかず、まずは正規表現を使ってみてください。

まずは下準備。

すぐ使えるダミーテキストから適当な文章をコピーして、エディタにペーストします。

文字列を検索する際にはエディタの正規表現検索を有効にする必要があります。
ATOMの場合は⌘+F(WINはCtrl+F)で検索を有効にして、「.*」ボタンをクリックしてください。

続いて、下記の正規表現をコピーして検索窓にペーストします。

検索 : ^\n?(.*?)$
置換 : <p>$1</p>\n

正規表現にマッチした文字列が検索されます。
Replace Allをクリックします。

複数段落の文章が<p>で囲まれました！

その他、便利な使い方

エディタに「文字列：〜」の部分をコピペしてそれぞれの正規表現で検索してみてください。

例えば上の例で、マッチした文字列だけを<span>で囲みたいとします。
その場合は置換に <span>$1</span> と入れてReplace Allをクリックします。

まとめ

いかがでしたか？　少しでも正規表現の便利さにお気付きいただけたら幸いです。
この記事では本当に簡単なことしかしていませんが、正規表現は奥が深いです。

覚えていると楽をできることが大きので、
皆様もぜひ、正規表現を使ってみてください！