主な想定読者

最近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で正規表現を使うと、複雑な検索や置換を簡単に行うことができます。正規表現の基本的な使い方を理解し、実際のコーディングで活用することで、効率よく作業を進めることが可能です。是非、日常のコーディングに取り入れてみてください。