Tools

Vim でHTMLタグの中身を置換するキー操作

投稿日:2020年2月13日 更新日:

1. 今回 Vim で実現したいこと

例えば、以下の内容のHTMLファイル (またはテキストファイル) があったとします。

<p>foo</p>

<p>bar</p>

このとき、

2つ目の <p>タグの内容を、1つ目の<p>タグの内容で置き換える

という操作を行うと以下になります。

<p>foo</p>

<p>foo</p>

この操作を実現するキー操作について説明します。

2. キー操作

やり方はいろいろあると思いますが、本記事では以下のキー操作を行います。

(1) 文字列をコピーします

f” にカーソルを持っていき、以下のキーを入力します。

yit

それぞれのキーの意味は以下になります。

キー 説明
y これから文字列をコピーします (operator command) (yank)
it タグの内部を指します (テキストオブジェクトにおける inner tag block)

(2) 置換します

b” にカーソルを持っていき、以下のキーを入力します。

viwp

それぞれのキーの意味は以下になります。

キー 説明
v ビジュアルモードを開始します
iw 単語を選択します (前後のスペースは除外) (テキストオブジェクトにおける inner word)
p 貼り付けます

3. 参考

📂-Tools

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JavaScript

npm のパッケージを最新版に更新する

目次1. npm のパッケージを最新版に更新するには?2. npm-check-updates を使ってプロジェクト内のパッケージを最新版にする手順1. npm-check-updates をインスト …

Firefox

Firefox にローカルプロキシを指定して WebSocket通信を仲介する際の注意点

Firefox にローカルプロキシを指定して WebSocket通信を仲介する際の注意点について説明します。

Anki

Anki のデッキ(単語帳)は、基本的に階層構造にはしていません

Anki のデッキ(単語帳)は、基本的に階層構造にはしないという方針について説明します。

Web Programming

Webプログラミングに役立つサービスたち

目次全般HTML, CSS, JS をすぐに試せるWebサービス他のサービスが使っている技術・ツールを知る多言語対応デザインレイアウトフォント関連ロゴ作成HTMLパーツジェネレーターオンラインエディタ …

Anki

Anki: 学習の流れを図にしました

Ankiにおける学習の流れを図にしました。