VSCodeでの検索方法について

こんにちは。
この記事ではVSCodeのいろいろな検索方法をまとめたいと思います。
最近、正規表現を利用した検索方法について触れる機会があったので、
備忘録のためにまとめてみました。
なるべく、初心者の方にもわかりやすいような書き方を目指しました。

## 【このような状況をイメージしています】
特定の文字列を検索したい
`西暦表記`をすべて検索したい
`URL`をすべて検索したい
時刻表記を`午後6時30分`も`18：30`も検索したい
`X曜日`をすべて検索したい

## 【前提】

### VSCodeの基本操作
`⌘+F`開いているページ内で検索
`⌘+Shift+F`フォルダ内を全体検索

### VSCodeのアイコン
赤枠：　`⌘+F`で出てくる検索エリア
青枠：　`⌘+Shift+F`で出てくる検索エリア
![img01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1064849/7daf406a-3509-b411-e33a-9bc1eaa26db6.png)
アイコンが意味しているものはどちらも共通

![vscode01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1064849/e0e82627-c913-6b63-2232-c13fc593d1df.png)


**１.大文字と小文字を区別**
大文字と小文字を区別して検索してくれる

**２.単語単位で検索**
「メリークリスマス」と検索した場合、
"メリークリスマス"はマッチするが"メリークリスマスイブ"はマッチしない

**３．正規表現**
正規表現を利用した検索ができる
このあとの【正規表現について】で詳しく述べます

**４．ハンバーガー**
選択したテキスト内で検索してくれる

**５．置換**
[＞]をクリックすると、置換用のウィンドウが表示される
対象の文字列、置換後の文字列を入力することで置換できる

![vscode02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1064849/d6791923-b5bb-c2d2-54cb-f82115d1e189.png)

**６．含めるファイル**
ファイル名、フォルダ名、拡張子の指定が可能

**７．除外するファイル**
ファイル名、フォルダ名、拡張子の指定が可能

## 【正規表現について】
※正規表現を理解している方は飛ばして下さい
正規表現とは、文字列の集合を一つの文字列で表現する方法
例えば`.`は「なんでもいい１文字」、`$`は「行の末尾」をいう意味で表現できます
中でもメタ文字と呼ばれているのが下記の様な文字で、
「１つの形式で表現するために特別な意味を持った」文字です
`.^$[]*+?|()`
このメタ文字と、通常の文字を組み合わせて、正規表現を駆使し、
いろいろな条件で文字列を検索する、ことを目的にやっていきたいと思います

## 【具体的な検索方法】

### なんでもいい１文字
`.`
半角の`.`で"なんでもいい1文字"を表現できます

検索
```
.曜日
```
マッチするもの
```
月曜日
火曜日
水曜日
```

### なんでもいい複数文字
`.*`
`*`は直前の文字が0個以上連続するものにマッチします
先程の`.`と併用すると、とにかく"なんでもいい１文字"がまったくないか、連続するかという表現ができます

検索
```
今年は.*年
```
マッチするもの
```
今年は2023年
今年は令和4年
今年は年
```

検索
```
p id="(.*)"
```
マッチするもの
```
p id="idName01"
p id="idName02"
p id=""
```


### orの検索
`|`
|で区切られた文字列のいずれかにあっていればマッチする

検索
```
2022年|2023年|2024年
```
マッチするもの
```
去年は2022年
今年は2023年
来年は2024年
```

検索
```
class="dummy"|id="dummy"
```
マッチするもの
```
<p class="dummy">ダミーテキスト</p>
<p id="dummy">ダミーテキスト</p>
```

### AorBorCの検索
`[]`
指定した文字のどれかがあっていればマッチする

検索
```
[月火]
```

マッチするもの
```
月曜日
火曜日
花火
お月さま
```

### A(単語)orB(単語)orC(単語)の検索

検索
```
(げつ|か|すい)曜日
```

マッチするもの
```
げつ曜日
か曜日
すい曜日
```


### アルファベットの検索
[A-Z]
検索
```
[A-Z]
```

マッチするもの
```
A
B
C
D
E
︙
X
Y
Z
```

検索
```
グループ[A-Z][A-Z][A-Z]
```

マッチするもの
```
グループAKB
グループHKT
グループSKE
```

検索
```
dummyimg_[0-9][0-9][0-9]
```

マッチするもの
```
<img src="/static/img/dummyimg_001.png" alt="">
<img src="/static/img/dummyimg_002.png" alt="">
<img src="/static/img/dummyimg_003.png" alt="">
```

### 繰り返し表現
量子指定子とよばれるものを利用して何文字以上、何文字未満などを指定できます
量子指定子
`*` 直前のパターンの0回以上連続
`+` 直前のパターンの１回以上連続
`?` 直前のパターンの0回か1回の出現
`{N}` 直前のパターンのN回の連続
`{min,max}` 直前のパターンのmin回からmax回の連続

検索
```
グループ[A-Z]{3}
```

マッチするもの
```
グループAKB
グループHKT
グループSKE
```

検索
```
dummyimg_[0-9]{3}
```

マッチするもの
```
<img src="/static/img/dummyimg_001.png" alt="">
<img src="/static/img/dummyimg_002.png" alt="">
<img src="/static/img/dummyimg_003.png" alt="">
```

### タグ内に複数続くスペースの検索

検索
```
>(.*)( |　){2}(.*)<
```

マッチするもの
```
<p>明日はクリス  マス</p>
<p>こんなところにスペースが   ３つも！</p>
```
補足
みにくいかもしれませんが( |　)は半角スペースと全角スペースがパイプ（|）で区切られています
{2}は2回以上繰り返すという意味で
( |　){2}は半角スペースor全角スペースが2回以上繰り返す、を表しています
(.*)はなんでもいい複数文字を表しています
→なんでもいい複数文字に挟まれた半角スペースor全角スペースが2回以上繰り返すものがマッチします

### 0パディングされた月
検索
```
[0][0-9]月
```

マッチするもの
```
02月
03月
```

### URLを検索
検索
```
https?://
```

マッチするもの
```
http://xxx.xxxx/
https://www.un-t.com/
```

https://〜のものとhttp://〜のものがマッチします
`?`は直前のパターンの0回か1回の出現なので今回はhttp「s」が0回か１回あるもの、ということになります

### 電話番号を検索
検索
```
0[789]?[0-9]-[0-9]{4}-[0-9]{4}
```

マッチするもの
```
<a href="tel:070-3434-2963">070-3434-2963</a>
<a href="tel:03-6809-0067">03-6809-0067</a>
```
補足
0[789]?[0-9]の部分について
携帯番号のときは先頭の３桁が「X」「7か8か9」「X」となるので0[789][0-9]
固定番号のときは先頭が２桁になるので「7か8か9」部分はなくてよいので0[789]?[0-9]
となっています

### 日付（YYYY-MM-DD）
検索
```
[0-9]{4}-[0-9]?[0-9]-[0-3]?[0-9]
```

マッチするもの
```
2022-5-5
2022-05-05
2022-12-24
```

##### タグ内にある日付だけ検索
検索（YYYY-MM-DD）
```
>(.*)[0-9]{4}-[0-9]?[0-9]-[0-3]?[0-9](.*)<
```

マッチするもの
```
<p>来年のバレインタインは2023-2-14</p>
<p>2000-05-05の夏の日</p>
<p>本日は2022-12-24です</p>
```

検索（YYYY年MM月DD日）
```
>(.*)[0-9]{4}年[0-9]?[0-9]月[0-3]?[0-9](.*)<
```
マッチするもの
```
<p>来年のバレインタインは2023年2月14日</p>
<p>2000年05月05日の夏の日</p>
<p>本日は2022年12月24日です</p>
```

### 時間
検索（HH:MM）
```
0?[0-9]:0?[0-9]
```

マッチするもの
```
12:00
9:00
```

検索（午前午後表記）
```
(午前)|(午後)0?[1-9]
```
マッチするもの
```
午前9時
午前9:00
午後10時
午後10:00
```

### 改行を含んだ検索
検索
```
今日の天気(.*)\n(.*)
```
マッチするもの
```
<p>今日の天気は
  晴れ</p>

<p>今日の天気って
  曇りだっけ？</p>

<p>今日の天気、
  雨</p>
```

### おわりに
いかがでしたでしょうか。
想像以上に正規表現は奥が深そうだなと思いましたが、使いこなせると便利なことがわかりました。
分かりづらい箇所、もっといいやり方などあれば教えていただけると幸いです。
お読みいただきありがとうございました。