javascript - 关闭并重新打开特定单词周围的标签

Question

我需要关闭 <span>在单词“hello”之前标记并在单击按钮后立即重新打开它。

这是一个 Fiddle

这是我的代码:

<span class="border"> 
    border Hello border border
</span>
<div> 
    <span class="button">Style me !</span>
</div>

jQuery :

$('.button').click(function () {
    $('.border').each(function () {
        var t = $(this).text();
        var s = t.split('Hello').join('</span>Hello<span class="border">');
        $(this).html(s)
    });
});

单击 .button 后的 HTML 输出是:

<span class="border"> 
    border Hello<span class="border"> border border
</span>

我想要的输出是:

<span class="border"> 
    border </span>Hello<span class="border"> border border
</span>

为什么不是 .join函数插入 </span>结束标记？

Answer 1

您可以像修改字符串一样修改dom结构，但是您必须以父元素为目标，因为您不能插入部分元素

$('.button').click(function () {
    $('.border').each(function () {
        var t = $(this).parent().html();
        var s = t.split('Hello').join('</span>Hello<span class="border">');
        $(this).parent().html(s)
    });
});

FIDDLE

请注意，这适用于示例，但如果父元素也有其他元素，则可能会导致问题，我强烈建议找到另一种方法来获得您正在寻找的结果，而不是关闭和打开元素中间等

编辑:

这是另一种方法，这根本不会影响父级，而且更整洁。
它也使用 outerHTML 来获取周围的标签，这样就不会插入部分元素，但是开始和结束标签都是传递的字符串的一部分

$('.button').click(function () {
    $('.border').each(function () {
        this.outerHTML = this.outerHTML.split('Hello').join('</span>Hello<span class="border">');
    });
});

FIDDLE

或者更简洁的 jQuery 版本

$('.button').click(function () {
    $('.border').prop('outerHTML', function(_, html) {
        return html.split('Hello').join('</span>Hello<span class="border">');
    });
});

FIDDLE