JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">--- <a class="b" href="/?q=spoiler">spoiler</a> ---
    <br>
    <br>dangerous text here
    <br>--- <a class="b" href="/?q=spoiler">spoiler</a> ---
    <br>safe text here
    <br>--- <a class="b" href="/?q=spoiler">spoiler</a> ---
    <br>
    <br>dangerous text here
    <br>--- <a class="b" href="/?q=spoiler">spoiler</a> ---</div>
<div class="content">--- <a class="b" href="/?q=spoiler">spoiler</a> ---
    <br>
    <br>dangerous text here
    <br>--- <a class="b" href="/?q=spoiler">spoiler</a> ---
    <br>safe text here
    <br>--- <a class="b" href="/?q=spoiler">spoiler</a> ---
    <br>
    <br>dangerous text here
    <br>--- <a class="b" href="/?q=spoiler">spoiler</a> ---</div>

CSS

.spoiler {
    border: solid 1px black;
    background: yellow;
}

JavaScript

$('.content').each(function () {
    var open = false;
    var result = $();
    $(this).contents().each(function () {
        var $this = $(this);
        if ($this.text() == "spoiler") {
            if (open) {
                result.wrapAll('<div class="spoiler"/>');
                open = false;
            } else {
                result = $();
                open = true;
            }
        } else {
            result = result.add($this)
        }
    });
    if (open) {
        result.wrapAll('<div class="spoiler"/>');
    }
});