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

我需要关闭< 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>关闭标签？

解决方法

您可以像字符串一样修改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