テキストエディタで正規表現の置換（検索）を行う際に、一部分だけを残し、その他の部分を置き換える、いわゆる後方参照を使った置換ができることを知ったのでメモ。忘れそうなので詳細を記載します。

正規表現を使って置換ができるテキストエディタであれば、たぶん全部同じ感じでいけると思います。試してみたテキストエディタは、ATOM と Sublime Text と Brackets で、すべて同じ要領でいけました。

なお、文章にするのがとても難しくて、一部でおかしな表現を使ってしまっているところがあるかもしれませんが、その点につきましては何卒ご容赦ください。

正規表現で置換（検索）をする方法

各テキストエディタ共通で、メニューから「置換」を選択すると、正規表現ではおなじみの「.*」というボタンがでてくるので、それをクリックすると正規表現を使った置換（検索）ができるようになります。

後方参照とは

一致したパターンの一部分をキャッシュ（記憶）して、あとで参照できるようにすること。置換の際に後方参照が使えると、キャッシュした部分を置換文字列の入力時に呼び出すことができるようになります。

置換文字列の入力時にそのキャッシュした部分を呼び出すことができると、その部分だけを残して、それ以外の部分を置き換えるということが可能になります。

後方参照で置換

基本的には普通に正規表現で後方参照するのと同じ感じで、パターンの残したい部分を括弧で囲み、その部分は$1で参照できるようになるので、置換文字列の入力時に呼び出して置換を行います。

残したい部分が2箇所以上の場合には、括弧を増やし、増やした分だけ$2、$3…とすれば複数箇所で変更が可能になります。

具体的には、以下のようにやります。

//検索対象
aabbccddee

//検索文字列
aabb(c)cddee

//置換文字列
ab$1de

//置換後の結果
abcde

2箇所以上残したい部分がある場合には以下のような感じ。

//検索対象
aabbccddee

//検索文字列
aa(b)b(c)c(d)dee

//置換文字列
a$1$2$3e

//置換後の結果
abcde

これだとさすがに分かりづらいので、もっと実践的にやってみたのが以下。

//検索対象
<div class="foo">test1</div>
<div class="bar">test2</div>

//検索文字列
<div(.*?)</div>

//置換文字列
<p$1</p>

//置換後の結果
<p class="foo">test1</p>
<p class="bar">test2</p>

上記は、divタグをpタグへ置換え、classと値はそのまま残すということを行っています。class名や値はそれぞれ異なりますが、正規表現で検索を行っているため取得でき、かつ後方参照で置換を行っているので、異なるclass名や値でもそのまま残すことができています。

以下は参考画像。