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

正規表現とは?

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

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

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

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

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

ATOM 正規表現
複数段落の文章が<p>で囲まれました!

その他、便利な使い方

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

正規表現 使い方
(?<!\d)\d{1,3}(?!\d)

文字列 : 1234 123 12345 123 123 111

数字を選択。この例では3桁の数字を選択しています。
桁数を変えたい時は任意の数字に変更してください。

(\b\d{1,3}(,\d{3})*\b)

文字列 : 1,000 1000 2,10 3,123 2,2 1,000,000 500,000

3桁ごとにカンマで区切られた数字を選択します。

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

まとめ

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

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

Writer

ko

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Page Topへ