Webデザイナー必見!？正規表現を使用したカンタン検索・置換

LPなどデザインを元にコーディングする際、文章をタグで囲ったりするのは以外と手間で面倒だったりします。
そこで、**正規表現**を使ってカンタンにタグで囲む方法を紹介したいと思います。

# そもそも**正規表現**って？
> 正規表現（せいきひょうげん、英: regular expression）とは、**文字列の集合を一つの文字列で表現する方法の一つ**である。
> [wikipediaより引用](https://ja.wikipedia.org/wiki/%E6%AD%A3%E8%A6%8F%E8%A1%A8%E7%8F%BE)

......言葉だと難しいですね:expressionless:。。実際の例を見ながら理解していきましょう！

# よく使う正規表現の種類（抜粋）

| メタ文字 | 意味 |
|:-:|:--
| ^ | 先頭 |
| $ | 末尾  |
| * | 0個以上の繰り返し |
| + | 1個以上の繰り返し |
| () | キャプション(マッチした文字列を保持) |
| . | 任意の1文字 |
| \n | 改行コードLFの改行 |

（まだまだたくさんありますが、本記事では割愛いたします）

# 実際の使用例を見てみましょう

[Sublime Text3](https://www.sublimetext.com/)を例に、使い方を解説していきます。

## <i class="fa  fa-smile-o"></i> CHAPTER1 ツールの準備

まずはじめに、Sublime Text3の検索・置換バーを開き、正規表現`（.*）`を有効にいたします。
>
| OS | ショートカット |
|:-:|:-:|
| Mac  | ⌘＋Option＋F |
| Win  | Ctrl：H |
> ![1.png](https://qiita-image-store.s3.amazonaws.com/0/54595/68842380-c4e9-2d18-4478-ccf94fd35a34.png)

>
> **Find / Find All** は検索
> **Replace / Replace All** は置換

## <i class="fa  fa-smile-o"></i> CHAPTER2 文章をタグで囲む

> ![2.png](https://qiita-image-store.s3.amazonaws.com/0/54595/8608818a-d039-f160-3964-03715756b94d.png)

>
> <font color="#999">※完成イメージ</font>

それでは、以下の文章を`<p>`タグで囲んでみましょう！

> <pre>この文章はダミーです。</pre>
> ![3.png](https://qiita-image-store.s3.amazonaws.com/0/54595/7c377623-08b8-16e3-2528-5145b0f665a9.png)

> 
|  | 文字列 | 補足 |
|:-:|:-:|:-:|
| 検索  | `^(.*)`  | 先頭から任意の1文字の0個以上の繰り返し |
| 置換 |  `<p>$1</p>` | 検索文字列を `<p>`で囲む |


置換すると、以下のように`<p>`で囲むことができました。
>
```html:html5
<p>この文章はダミーです。</p>
```
> ![4.png](https://qiita-image-store.s3.amazonaws.com/0/54595/cc259a75-4253-b46b-452a-a3d4d5aa6b12.png)



手打ちすると面倒ですが、このようにカンタンにタグで囲むことができます。
同様の方法で、複数行でも同様に囲むことが可能です。

> ![5.png](https://qiita-image-store.s3.amazonaws.com/0/54595/8e0abe83-f3f6-2b60-8726-bf344f1d6af1.png)



## <i class="fa  fa-smile-o"></i> CHAPTER3 改行`<br>`を含む文章をタグで囲む

> ![6.png](https://qiita-image-store.s3.amazonaws.com/0/54595/50fd366a-9e8e-916c-bc36-5dee14dfdc7b.png)


> <font color="#999">※完成イメージ</font>

それでは、以下の文章を改行後、`<p>`タグで囲んでみましょう！

>
<pre>この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
</pre>
> ![7.png](https://qiita-image-store.s3.amazonaws.com/0/54595/959366cf-c81f-1402-629c-8b90bc32c7cd.png)

> 
|  | 文字列 | 補足 |
|:-:|:-:|:-:|
| 検索  | `\n`  | 改行コードを検索 |
| 置換 |  `<br>` |　`<br>`に置き換える |


置換すると、以下のように改行位置に`<br>`を追加することができ、文章が一行になりました。
> ![8.png](https://qiita-image-store.s3.amazonaws.com/0/54595/6773c2ac-6a0c-04f6-12bc-16affeab7373.png)



そこで、もう一度「1. 文章をタグで囲む」と同様の検索・置換を行います。
> ![9.png](https://qiita-image-store.s3.amazonaws.com/0/54595/9b82519d-e073-c61e-bc61-6cc01b211b7c.png)

> 
|  | 文字列 | 補足 |
|:-:|:-:|:-:|
| 検索  | `^(.*)`  | 先頭から任意の1文字の0個以上の繰り返し |
| 置換 |  `<p>$1</p>` | 検索文字列を `<p>`で囲む |

置換すると、以下のように`<p>`で囲むことができました。

> 
```html:html5
<p>この文章はダミーです。<br>文字の大きさ、量、字間、行間等を確認するために入れています。</p>
```
> ![10.png](https://qiita-image-store.s3.amazonaws.com/0/54595/c1145de8-92c1-3a71-318a-15a7856889fc.png)



`<br>`の位置で改行したい場合は、更に置換していきます。

> ![11.png](https://qiita-image-store.s3.amazonaws.com/0/54595/1f5abe99-24a2-a239-ca3f-f0904a52f804.png)

> 
|  | 文字列 | 補足 |
|:-:|:-:|:-:|
| 検索  | `<br>`  |  |
| 置換 |  `<br>\n` | `<br>`の後に改行を追加 |

`<br>`の位置で改行されました。
> 
```html:html5
<p>この文章はダミーです。<br>
文字の大きさ、量、字間、行間等を確認するために入れています。</p>
```
> ![12.png](https://qiita-image-store.s3.amazonaws.com/0/54595/4a4e5e23-aa5f-eb15-16cb-8a8d3d9a38dc.png)



いかがでしたでしょうか:grinning:？

ちなみにここまでの置換を以下のようにすると、1回できますよ！
> ![13.png](https://qiita-image-store.s3.amazonaws.com/0/54595/a63199c1-4bd0-4c34-f5a1-ab7f8decf09d.png)

>
|  | 文字列 | 補足 |
|:-:|:-:|:-:|
| 検索  | `^(.*)\n(.*)$`  | 先頭から任意の1文字の0個以上の繰り返し①と改行と任意の1文字の0個以上の繰り返し② |
| 置換 |  `<p>$1<br>\n$2</p>` | 文字列①の後に`<br>`を追加改行し文字列②を `<p>`で囲む |
> 括弧を複数使用すると、`$1,$2…`を使って変数から値を取得することができます。

正規表現は、**まだまだまだまだ**できることがいっぱいありますので、
是非応用して使っていただければと思います:blush: