主な想定読者
最近VSCodeを使い始めたWEBコーダー初心者
概要
vscodeの正規表現機能を活用することで、HTMLのコーディング作業を効率化する方法を解説します。
VSCodeでは
cmd (Ctrl) + F を押して検索ウィンドを表示
>ボタンを押して置換に設定
.* ボタンで正規表現を扱うことができます。
正規表現を利用した検索、より高度な検索・置換が可能となります。
以下に、よく使う正規表現のパターンを示します。
よく使う正規表現のパターン
| パターン | 意味 | 例 |
|---|---|---|
[ ] |
正規表現における[ ]（角括弧）は、内に囲まれた文字がマッチします |
[a-z]はaからzの文字がマッチする。 |
\d |
数字のみマッチする | \d[a-z\d] |
{n, m} |
直前の文字がn回、多くてもm回出現するものにマッチする | /\d{10,11}/ |
{n} |
直前の文字がn回出現するものにマッチする | /\d{10}/ |
. |
改行以外のどの文字にもマッチする | (?=.*?\d) |
+ |
直前の文字の1回以上の繰り返しにマッチする | [a-z\d]+\z |
\A |
直後の文字が先頭にある文字列にマッチする | \A[ぁ-んァ-ヶー] |
\z |
直前の文字が末尾にある文字列にマッチする | [ぁ-んァ-ヶー]+\z |
グループ化と参照
正規表現を括弧()で囲むことで、マッチした部分をグループ化することができます。これにより、後で参照することが可能です。
例
グループ化の検索
<body id="(.*)">
グループ化の置換
<body id="$1">
置き換え例
元テキスト
<p id="hogehoge1"></p>
<p id="hogehoge2"></p>
<p id="hogehoge3"></p>
検索
<p id="hogehoge(\d)">
置き換え
<p id="hugahuga$1">
結果
<p id="hugahuga1"></p>
<p id="hugahuga2"></p>
<p id="hugahuga3"></p>
まとめ
VSCodeで正規表現を使うと、複雑な検索や置換を簡単に行うことができます。正規表現の基本的な使い方を理解し、実際のコーディングで活用することで、効率よく作業を進めることが可能です。是非、日常のコーディングに取り入れてみてください。