段々と知識もついてきて業務効率も上がってきたものの、やっぱり知らないことってあるもので、
一括置換でマッチした文字列を再利用する方法もその一つ。
つい先日初めて知ったのでメモします。
本題
結論から言うと、
・正規表現で検索時に再利用したい部分を()で囲む
・$n で再利用する（nは該当する()の位置（1個目だったら1、2個目だったら2のように））
想定するケース
イメージしにくいので、サンプル。
今回想定するケースは以下の通り。
・ソース内の<script>タグの src 属性のパスを変える。
・具体的には src=”hoge.js” から、 src=”js/hoge.js” のように、階層を移動する。
（IDEやエディタによっては当該ファイルを移動すればパスも自動で修正してくれる機能もありますが・・・割愛。）
ソースは以下の通り。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <p>Hello World</p> <script type="text/javascript" src="js/hoge1.js"></script> <script src="js/hoge1.js" type="text/javascript"></script></body></html> |
10行目、11行目が該当。
なぜこのケースでマッチ文字列の再利用が必要かというと、キレイじゃないコードだと、以下のような場合があります。
ある場所では、<script type=”text/javascript” src=”hoge.js”>
またある場所では、<script src=”hoge.js” type=”text/javascript”>
・・・のように、src属性とtype属性の記載位置が統一されていない場合、単純に一括置換ができません。
ではどうすればいいか。
方法
VSCODEの検索ウインドウ（WindowsだとCtrl+Shift+F）で以下のように入力。
（正規表現をON）
1 | (<script .*src=") |
置換文字は以下のように入力。
1 | $1js/ |
こうなります。
解説
[<script .* src=”] を検索対象とするが、カッコで囲まれているので再利用対象となる。
置き換えエリアを見ると、$1の後ろに”js/”と指定されている為、$1部分で”<script〜”が再利用され、
後ろに”js/”を付与した形で置き換えられる。
