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>

我想删除留下文本节点的“span”，我该怎么做呢？我尝试使用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();

Working Demo此处 - 将 / edit 添加到网址以播放代码

Answer 3

这有效：

wrap = $('.highlight');
wrap.before(wrap.text());
wrap.remove();

Answer 4

这将执行您想要的操作，并保留.highlight范围内的任何标记。

content = $(".highlight").contents();
$(".highlight").replaceWith(content);

Answer 5

element = document.getElementById("span id");
element.parentNode.insertBefore(element.firstChild, element);
element.parentNode.removeChild(element);

Answer 6

text.replace（/＆lt; /？[^＆gt;] +（＆gt; | $）/ g，“”）;

Answer 7

更改跨度的类比实际删除它要容易得多。你可以使用纯javascript：

document.getElementById("span id").className="";

或者jquery的toggleClass函数：

 $("element").toggleClass("highlight");

此外，最佳做法是说你不应该使用暗示风格的类名，比如高亮。尝试“强调”而不是。：d

Answer 8

更好的解包插件：

$.fn.unwrap = function() {
  this.parent(':not(body)')
    .each(function(){
      $(this).replaceWith( this.childNodes );
    });

  return this;
};

来自Ben Alman

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

8 个答案: