VimでHTMLタグの中身・属性値を書き換える（cit / dat）

HTMLやJSXを編集していると、タグの中身だけを書き換えたい、あるいはタグごと丸ごと削除したい場面が頻繁にあります。括弧・引用符と同じ考え方で、タグ専用のテキストオブジェクトtを使えば手早く編集できます。

タグの中身を書き換える：cit

c（変更）とit（inner tag、カーソルのあるHTMLタグの中身）の組み合わせです。カーソルが開始タグ・終了タグ・中身のどこにあっても、タグの中身全体が対象になります。

<p>古いテキスト</p>

<p>新しいテキスト</p>

タグごと削除する：dat

dat

d（削除）とat（around tag、開始タグから終了タグまで丸ごと）の組み合わせです。中身だけでなく開始・終了タグ自体も含めて削除されます。不要になったブロックごと消したいときに使います。

属性値を書き換える

タグの中身ではなく、属性値だけを書き換えたい場合は引用符のテキストオブジェクトがそのまま使えます。

<div class="old-class">

<div class="new-class">

カーソルが属性値の引用符の内側にある必要がある点は、通常の文字列リテラルと同じ扱いになります。HTML内に埋め込まれたCSSやJavaScriptの文字列を書き換えるときにも、この考え方がそのまま応用できます。

入れ子になったタグでの挙動

タグが入れ子になっている場合、cit/datはカーソルに最も近い（内側の）タグを対象にします。外側のタグ全体を対象にしたいときは、カーソルを外側のタグの開始タグ・終了タグ・またはその間の位置まで動かしてから実行します。深くネストしたJSXなどでは、意図した階層を狙うのに慣れが必要になります。

カウントを前置きすれば、階層を1段ずつ外側へ広げて対象を選べます。

2dat   " 1つ外側のタグごと削除

カーソルをいちいち外側のタグまで移動させなくても、数値で階層を指定すれば同じ結果が得られます。ネストが深いコンポーネントを編集するときほど、この指定方法の恩恵が大きいです。

実務での組み合わせ例

まとめ

HTMLタグの中身を書き換えるならcit、タグごと削除するならdat。属性値の書き換えには通常の引用符テキストオブジェクトci"がそのまま使えます。citのtもテキストオブジェクトの1つなので、オペレータ+テキストオブジェクトという形は単語や括弧のときとまったく同じです。1つ覚えれば残りは記号を差し替えるだけで済みます。citも、開始タグより手前にカーソルがあれば前方を探して中身を掴みます。効かないのは閉じタグより後ろへ行ってしまったときで、この場合はタグの対応が決まらず何も起きません。押しても無反応なら、カーソルが要素を通り過ぎていないかを先に確かめてください。