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>

如何仅使用打开的DIV替换HTML标记并稍后将其关闭

1 个答案: