在vim中使用HTML标签包装部分内容

Question

我希望能够快速地将我的HTML整个部分用其他标签包裹起来。当我意识到我需要在其他div周围添加一个外部div时，我经常遇到这种情况，例如：

原始HTML：

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

修改后的HTML：

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

我可以使用matchit.vim和surround.vim，但我不相信surround.vim会用单词（即<div>）来包围，只会使用单个字符（即<），而且它也不能进行缩进。

目前我能想到的最接近的方法需要按15-20个按钮。

- puk

---

surround.vim确实支持此功能。它就在自述文件中，但vim.org似乎会破坏它。请参见此处：https://github.com/tpope/vim-surround/blob/master/README.markdown - Randy Morris

@RandyMorris 我知道它包围在HTML标签中。但README说明它还缩进内部文本，如何实现？ - ZyX

使用 S 而不是 s，我相信。 - Randy Morris

是的，使用 S 来清洁缩进的 HTML。 - romainl

Answer 1

surround.vim 可以用html标签来包围，但在使用可视模式下的 S 时才有缩进，而不是在使用ys和s 的情况下。感谢@RandyMorris。如果选区是按行排列的，则它也将相同缩进的div放置在上一行和下一行（不带缩进）。对于yss，甚至都无法实现这一点，因此如果您真的想避免可视模式，就必须使用 ysg@<div>j>>。

更新：有选项g:surround_indent 和 b:surround_indent。如果您设置了其中任何一个选项，surround.vim将使用=来将被包围的文本与其周围的内容进行缩进，而上述关于ys 不缩进的混乱情况则会不成立，同样适用于S (S 也将使用=)。需要filetype indent on和适当的缩进设置。

如果您没有设置这些选项，则将看到第一段中描述的行为：S会无条件缩进。

- ZyX

---

我使用 surround.vim，它可以正确地添加标签和缩进。我的 vimrc 文件中还有 'indent on' 和 'set autoindent'。 - Gary Willoughby

@GaryWilloughby 如果您能提及缩进是如何被纳入的，那么我会接受这个答案，或者Gary可以为此提供一些启示。 - puk

使用行选择模式（“V”）选择行，然后按大写字母“S”。这将允许您在命令行中输入标签，当标签被关闭时，将环绕和缩进所选行。 - Gary Willoughby

Answer 2

是的，环绕是正确的方法。假设你的光标位于第一个div上：

V%j%S<div id="Main"<CR>

或者

V5jS<div id="Main"<CR>

可以做到这个效果。

根据上下文，整个事情甚至可以缩短为：

Vat<div id="Main"<CR>

在这里，<div id="Main" 部分似乎很难跳过。

当然，还有其他方法。

例如，ZenCoding让你可以使用类似于CSS语法的方式：

V5j<C-y>,div#Main<CR>

我不知道有什么更快的方法来得到你想要的东西。

TextMate的ControlShiftw很好用，但它默认为<p>，所以你仍然需要键入div id="Main"。

- romainl

Answer 3

将光标放置在您想要包围的标签处，

vatS<div id="Main"><CR>

- Fisherman

Answer 4

1. 在视觉上选择要包围的标签

2. 按下St

3. 在命令行中，会出现一个提示，通常会显示类似的内容：
   输入HTML标签：

4. 输入所需的标签，它将用指定的标签包围所选内容。

- Saravanan