使用javascript删除文本节点周围的标记

Question

如果我有一些看起来像这样的HTML:

<div id="text">
      This is some text that is being written <span class="highlight">with
      a highlighted section</span> and some text following it.
</div>

我想删除留下文本节点的"跨度",我该怎么做呢？我尝试使用jQuery来执行以下操作:

wrap = $('.highlight');
wrap.children().insertBefore(wrap);
wrap.remove();

但这不起作用我猜是因为孩子们返回一个空集,因为那里只有一个文本节点.所以发生的一切都是跨度及其内容被删除.

我也愿意接受我的方法.发生的事情是,当用户选择一个文本块时,我的代码实际上创建了该跨度.它将选定的文本包装在一个范围内,以便在视觉上区分它.我之后需要删除跨度,因为mozilla的范围对象的工作方式存在一些怪癖.

编辑:我不想替换'#text'的全部内容,因为它可能非常大.

Answer 1

你得到文本,并用它替换跨度:

var wrap = $('.highlight');
var text = wrap.text();
wrap.replaceWith(text);

Answer 2

将它包装在一个插件中

(function($) {   
    $.fn.tagRemover = function() {           
        return this.each(function() {            
        var $this = $(this);
        var text = $this.text();
        $this.replaceWith(text);            
        });            
    }    
})(jQuery);

然后像这样使用

$('div span').tagRemover();

这里的工作演示 - 添加 /编辑 URL以使用代码