如何用仅起始<div>标签替换HTML标签并在后续完成闭合？

我明白你的痛点——直接用replaceWith插入单独的开/闭标签根本行不通，因为jQuery是在操作DOM节点，不是纯字符串，它会自动把不完整的标签补全成合法的DOM元素，这就导致你的简单方案直接失效了。

针对你的场景，我们需要换个思路：找到对应起始和结束的<p>标签，把中间需要隐藏的内容包裹到目标<div>里，再替换掉原来的标记标签，而不是试图插入单独的标签。下面是具体的实现代码：

// 遍历所有包含起始标记的<p>
$('p:contains("[spoiler]")').each(function() {
  const $startTag = $(this);
  // 找到当前起始标记之后最近的结束标记<p>
  const $endTag = $startTag.nextAll('p:contains("[/spoiler]")').first();
  
  // 如果找不到对应的结束标记，直接跳过避免出错
  if (!$endTag.length) return;
  
  // 收集起始和结束标记之间的所有内容元素
  const $spoilerContent = $startTag.nextUntil($endTag);
  
  // 创建我们需要的剧透容器
  const $spoilerContainer = $('<div class="qa-spoiler"></div>');
  
  // 把需要隐藏的内容放进容器里
  $spoilerContainer.append($spoilerContent);
  
  // 清理掉原来的标记标签和中间的占位元素
  $endTag.remove();
  $startTag.replaceWith($spoilerContainer);
});

代码解释： #

• 我们用:contains定位到所有带[spoiler]的起始<p>，然后为每个起始标签找到最近的结束标签（用nextAll().first()避免跨多个剧透块的问题）。
• 把中间需要隐藏的内容收集起来，塞进新建的<div class="qa-spoiler">里。
• 最后移除结束标记的<p>，并把起始标记的<p>替换成我们的剧透容器，这样就得到了合法的DOM结构。

额外优化（可选）： #

如果你的结束标记<p>里还有额外内容（比如示例里的<br/>），可以在移除前清理掉，或者如果需要保留结束标记里的其他内容，可以调整$endTag.remove()为$endTag.html($endTag.html().replace(/\[\/spoiler\]<br\s*\/?>/g, ''))来保留有用内容。

这种方法完全基于DOM节点操作，不会有自动闭合标签的问题，而且能完美适配你无法控制原始HTML的场景。

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