読者です 読者をやめる 読者になる 読者になる

俺、サービス売って家買うんだ

正直このペースで作ってればいつか2-3億で売れるのがポっと出来るんじゃないだろうか

Vimの置換で後方参照とvery magic modeを利用してReactのJSXのclassNam属性を通常のHTMLのclass属性に一括変換する

React
f:id:ie-kau:20161213195449p:plain:w400

やりたいこと

ReactのJSXにCSS modulesなどを使って以下のように動的にクラスを適応したとします。

<div className={CSS.modal}>
  <div className={CSS.title}>タイトル</div>
  <div className={CSS.contents}>コンテンツ</div>
</div>

で、Reactの利用を途中でやめたので、className属性をのclass属性に変更したいと思います。

<div class="modal">
  <div class="title">タイトル</div>
  <div class="contents">コンテンツ</div>
</div>

Vimのバージョン

vim 7.4

結論

結論から言ってしまうと下のようにかけます。

:%s/\vclassName\=\{CSS.(.*)\}/class="\1"/g

後方参照
Vimの置換における後方参照は置換後の文字列で\1, \2というメタ文字を利用します。

very magic mode

これ知らなかったんだけど、Vimの正規表現で利用できるメタ文字をすべて「\」記述のなしで書くことができる検索モードのようです。/(^o^)\ シラナカッタ
書式としては、検索文字の前に「\v」を記述するだけ。

very magic modeを利用しない場合はと言いますと、グループ用のメタ文字()をエスケープさせる必要があります。 ↓

:%s/className={CSS.\(.*\)}/class="\1"/g

ん?
今回の場合「{」がメタ文字じゃなくて通常の文字だから very magic modeじゃないほうが楽じゃない?

追伸

祝!100記事目!