Remove thẻ xung quanh một nút văn bản sử dụng javascript

Question

Nếu tôi có một số HTML trông như thế này:

<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> 

Và tôi muốn loại bỏ các "nhịp cầu" giữ nút văn bản trong thời hạn, làm thế nào tôi sẽ đi về làm điều đó ? Tôi đã thử sử dụng jQuery để thực hiện các thao tác sau:

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

Nhưng điều đó không có tác dụng. Tôi đoán vì trẻ em trả về bộ trống vì chỉ có nút văn bản trong đó. Vì vậy, tất cả những gì xảy ra là khoảng và nội dung của nó được loại bỏ.

Tôi cũng mở để lựa chọn thay thế cho cách tiếp cận của mình tại đây. Điều đang xảy ra là mã của tôi thực sự tạo ra khoảng thời gian đó khi người dùng chọn một khối văn bản. Nó kết thúc tốt đẹp văn bản được chọn trong một khoảng để phân biệt bằng mắt nó. Tôi cần phải loại bỏ các span sau đó mặc dù vì một số quirks với cách đối tượng phạm vi của mozilla hoạt động.

EDIT: Tôi không muốn thay thế toàn bộ nội dung của '#text' bằng cách này vì nó có thể rất lớn.

Answer 1

Bạn nhận được các văn bản, và thay thế khoảng với nó:

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

Answer 2

văn bản.replace (/ < /? [^>] + (> | $)/G, "");

Answer 3

này hoạt động:

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

Answer 4

này sẽ làm những gì bạn muốn, và cũng có thể bảo vệ bất kỳ thẻ trong khoảng .highlight .

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

Answer 5

nó sẽ dễ dàng hơn nhiều khi chỉ thay đổi lớp của khoảng hơn là thực sự loại bỏ nó. Bạn có thể sử dụng javascript tinh khiết: toggleClass chức năng

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

Hoặc jquery của:

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

Ngoài ra, thực hành tốt nhất nói rằng bạn không nên sử dụng tên lớp ngụ ý một phong cách, giống như điểm nhấn. Thay vào đó, hãy thử "nhấn mạnh". : D

Answer 6

bọc nó trong một plugin

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

và sau đó sử dụng như vậy

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

Working Demo đây - thêm /chỉnh sửa vào URL để chơi với mã

Answer 7

Plugin unwrap tốt hơn:

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

    return this; 
}; 

từ Ben Alman

Answer 8

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