How can I configure Vim so that when I change one member of a matching pair of HTML tags, the other is automatically changed to match?

For example: given <span>content</span>, I want to change the first <span> to <div>, and then the second <span> automatically changes to </div>. Optimally this would happen upon returning from insert mode to normal mode, but it would be OK if I had to hit a special keybinding to make this happen.


The excellent surround.vim makes this simple — with the cursor anywhere within the tag you want to change, in normal mode, type cst<div> (change surrounding tag to <div>). The tag name will be changed to "div" in both the opening and closing tag, and you'll be back in normal mode.


Here are few steps:

  1. Place your cursor on the first tag.
  2. Select outer html code by pressing: vat.
  3. Press Esc to exit visual mode and type:


    Note that :'>,'>s/span/div/ won't work correctly if there are two occurrences of the same closing tag in the same line, as it'll always change the first one. To fix it, use: :'>,'>s/.*\zsspan/div/ instead. See: How to change last occurrence of the string in the line?


  • Does entering visual mode do anything, once you've exited it? – Pureferret Jan 25 '17 at 11:43
  • I'm not sure if I get the question. In the visual mode you're selecting the outer html for the given HTML tags, so substitution will only affect the selected region. – kenorb Jan 25 '17 at 11:46
  • When I tried this, it looked like pressing <kbd>Esc</kbd> exited visual mode entirely, so that the substitution would have effected any other region; nothing remained highlighted after pressing <kbd>Esc</kbd> . – Pureferret Jan 25 '17 at 13:10
  • @Pureferret The ranges from the 3. step should use the last selected region. – kenorb Jan 25 '17 at 13:29
  • This is a terrible thing! It must change a closing tag on the fly during editting matching tag – Alex Shwarc Sep 15 '17 at 17:55

With the SwapIt - Extensible keyword swapper, you can define tag groups that can then be toggled via <C-a> / <C-x>. For example, in ~/.vim/ftplugin/html_swapit.vim:

SwapList layout p div span

If you have both start and end tag on the same line (and there's only one of that type), you can edit both via my ChangeGlobally plugin.

There are also several "multicursor" plugins, which allow you to mark certain words and edit them all at once.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.