VS Code如何通过查找替换删除HTML元素并保留内部内容？

完全可以通过VS Code自带的正则查找替换功能实现，不需要额外安装插件，操作步骤如下：

• 调出查找替换面板：Windows/Linux 按快捷键 Ctrl+H，Mac 按快捷键 Cmd+H
• 点击查找输入框右侧的 .* 图标，开启正则匹配模式
• 在「查找」输入框填入正则规则：

<a[^>]*>([\s\S]*?)<\/a>

• 在「替换」输入框填入：

$1

• 点击「全部替换」即可完成批量处理。

正则规则说明 #

• <a[^>]*>：匹配所有<a起始标签，不管标签上挂载了class、href、id、style等任何属性，都会一直匹配到起始标签的闭合符>为止
• ([\s\S]*?)：用非贪婪模式匹配a标签包裹的所有内容，包括普通文本、换行、a标签内部的其他HTML标签，同时把这部分内容标记为第一个捕获组
• <\/a>：精准匹配a标签的闭合标签</a>
• 替换值$1的作用是只保留前面捕获到的a标签内部内容，直接剔除前后的a标签外壳和所有附属属性。

效果演示 #

针对给出的转换前示例：

<td><a class="x">1</a></td>
<td><a class="y">2</a></td>
<td><a class="z">3</a></td>

执行全部替换后，会直接输出期望的结果：

<td>1</td>
<td>2</td>
<td>3</td>

注意事项 #

这个正则能覆盖绝大多数日常使用场景，只要a标签内部没有嵌套其他a标签，都能准确匹配替换。如果是存在多层a嵌套的极端复杂HTML结构，正则可能出现匹配误差，这种情况建议用专门的HTML解析工具处理。

内容的提问来源于stack exchange，提问作者Sean Taylor