如何只用一个开放的DIV替换HTML标签，稍后在[关闭]关闭它

Question

我试图找到答案，只是偶然发现了replaceWith Automatically Closes the Tag和Replace HR Element with Open Div - 两者都找到了第一个和最后一个元素并且包裹了一个div。

在我的例子中，我们在p元素中有一个包含多个文本的HTML，例如：

<p>
    [spoiler]
</p>
<p>
    Text to hide. 
</p>
<p>
    [/spoiler]<br />
</p>
<p>
    Text in-between.
</p>
<p>
    [spoiler]
</p>
<p>
    Second Text to hide. 
</p>
<p>
    [/spoiler]
</p>
<p>
    More Text …
</p>

现在我需要找到开放的[spoiler]标签，并用开口p替换他们的包装<div class="spoiler">标签。接下来我需要找到关闭的[/spoiler]标签，并用关闭的</div>替换它们。

Jquery的replaceWith()总是关闭插入的元素。

所以我的简单方法不起作用：

$(this).find('p:contains([spoiler])').replaceWith('<div class="qa-spoiler">');
$(this).find('p:contains([/spoiler])').replaceWith('</div>');

我无法控制HTML标记。

怎么做？

PS：更改标题从“replaceWith而不关闭Tag并将Div包裹在多个p标签周围”更改为“如何仅用开放DIV替换HTML标签并稍后关闭它”。

Answer 1

此逻辑找到包含开始和结束扰流标记的p标记之间的所有元素，并将它们包装在您想要的div中。然后返回并删除扰流标签，有效地“替换”它们。

$('p:contains([spoiler])').each(function(){
	$(this).nextUntil('p:contains([/spoiler])').wrapAll('<div class="qa-spoiler">');
}).remove();

$('p:contains([/spoiler])').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    [spoiler]
</p>
<p>
    Text to hide. 
</p>
<p>
    Text to hide. 
</p>
<p>
    [/spoiler]<br />
</p>
<p>
    Text in-between.
</p>
<p>
    [spoiler]
</p>
<p>
    Second Text to hide. 
</p>
<p>
    [/spoiler]
</p>
<p>
    More Text …
</p>