wrapping sections with HTML tags in vim

Issue

I want to be able to quickly wrap entire sections of my HTML with other tags. I run into this a lot when I realize I need an outer div around my other divs, like so:

Original HTML:

<div id='a'>
   <img src='a.png'>
</div>
<div id='b'>
   <img src='b.png'>
</div>

Modified HTML:

<div id='Main'>
   <div id='a'>
      <img src='a.png'>
   </div>
   <div id='b'>
      <img src='b.png'>
   </div>
</div>

I could use matchit.vim and surround.vim but I don't believe surround.vim surrounds with words (ie. <div>), just single characters (ie. <) and it also does not indent.

The closest thing I can think of right now takes 15-20 button presses.

Solution

surround.vim can surround with html tags, but it does not indent indents only when using S from visual mode, not ys and not s in visual, thanks to @RandyMorris. It also putts same-indented div’s on the next and previous lines (without indenting) if the motion to ys or visual selection used was linewise. Does not do even this for yss, so you have to use ysg@<div>j>> if you really want to avoid visual mode.

Update: there are g:surround_indent and b:surround_indent options. If you set any of them surround.vim will use = to indent surrounded text with its surroundings and the above mess with ys not indenting will be false, as well as S (S will use = as well). Requires filetype indent on and proper indenting settings.

If you don’t set these options you will see behavior described in the first paragraph: S indents unconditionally.

Answered By - ZyX