Xóa thẻ HTML nhưng vẫn giữ bên trongHtml

Tôi có một số HTML đơn giản mà tôi cần phải loại bỏ định dạng đơn giản.

A nice house was found in <b>Toronto</b>.

Tôi cần loại bỏ phần in đậm, nhưng giữ nguyên câu.

Làm thế nào điều này có thể trong jQuery?

$('b').contents().unwrap();

Cái này chọn tất cả các <b>phần tử, sau đó sử dụng.contents() để nhắm mục tiêu nội dung văn bản của <b>, sau đó.unwrap() loại bỏ <b>phần tử cha của nó .

Để có hiệu suất cao nhất, luôn luôn đi bản địa:

var b = document.getElementsByTagName('b');

while(b.length) {
    var parent = b[ 0 ].parentNode;
    while( b[ 0 ].firstChild ) {
        parent.insertBefore(  b[ 0 ].firstChild, b[ 0 ] );
    }
     parent.removeChild( b[ 0 ] );
}

Điều này sẽ nhanh hơn nhiều so với bất kỳ giải pháp jQuery nào được cung cấp ở đây.

Bạn cũng có thể sử dụng .replaceWith(), như thế này:

$("b").replaceWith(function() { return $(this).contents(); });

Hoặc nếu bạn biết đó chỉ là một chuỗi:

$("b").replaceWith(function() { return this.innerHTML; });

Điều này có thể tạo ra sự khác biệt lớn nếu bạn hủy kết nối nhiều yếu tố vì cách tiếp cận ở trên nhanh hơn đáng kể so với chi phí .unwrap().

Cách đơn giản nhất để loại bỏ các phần tử html bên trong và chỉ trả về văn bản sẽ là hàm JQuery .text () .

Thí dụ:

var text = $('<p>A nice house was found in <b>Toronto</b></p>');

alert( text.html() );
//Outputs A nice house was found in <b>Toronto</b>

alert( text.text() );
////Outputs A nice house was found in Toronto

Trình diễn jsFiddle

Còn cái này thì sao?

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));

Dòng đầu tiên sao chép nội dung HTML của bthẻ vào vị trí ngay sau bthẻ và sau đó dòng thứ hai xóa bthẻ khỏi DOM, chỉ để lại nội dung được sao chép.

Tôi thường bọc cái này vào một chức năng để dễ sử dụng hơn:

function removeElementTags(element) {
   element.insertAdjacentHTML("afterend",element.innerHTML);
   element.parentNode.removeChild(element);
}

Tất cả các mã thực sự là Javascript thuần túy, JQuery duy nhất đang được sử dụng là để chọn phần tử cần nhắm mục tiêu ( bthẻ trong ví dụ đầu tiên). Hàm này chỉ đơn thuần là JS: D

Cũng nhìn vào:

• https://developer.mozilla.org/en-US/docs/Web/API/Euity/insertAdjighborHTML

// For MSIE:
el.removeNode(false);

// Old js, w/o loops, using DocumentFragment:
function replaceWithContents (el) {
  if (el.parentElement) {
    if (el.childNodes.length) {
      var range = document.createRange();
      range.selectNodeContents(el);
      el.parentNode.replaceChild(range.extractContents(), el);
    } else {
      el.parentNode.removeChild(el);
    }
  }
}

// Modern es:
const replaceWithContents = (el) => {
  el.replaceWith(...el.childNodes);
};

// or just:
el.replaceWith(...el.childNodes);

// Today (2018) destructuring assignment works a little slower
// Modern es, using DocumentFragment.
// It may be faster than using ...rest
const replaceWithContents = (el) => {
  if (el.parentElement) {
    if (el.childNodes.length) {
      const range = document.createRange();
      range.selectNodeContents(el);
      el.replaceWith(range.extractContents());
    } else {
      el.remove();
    }
  }
};

Một giải pháp bản địa khác (trong cà phê):

el = document.getElementsByTagName 'b'

docFrag = document.createDocumentFragment()
docFrag.appendChild el.firstChild while el.childNodes.length

el.parentNode.replaceChild docFrag, el

Tôi không biết nếu nó nhanh hơn giải pháp của user113716, nhưng đối với một số người có thể dễ hiểu hơn.

Câu trả lời đơn giản nhất là thổi tâm trí:

bên ngoàiHTML được hỗ trợ xuống Internet Explorer 4!

Đây là để làm điều đó với javascript ngay cả khi không có jQuery

function unwrap(selector) {
    var nodelist = document.querySelectorAll(selector);
    Array.prototype.forEach.call(nodelist, function(item,i){
        item.outerHTML = item.innerHTML; // or item.innerText if you want to remove all inner html tags 
    })
}

unwrap('b')

Điều này sẽ hoạt động trong tất cả các trình duyệt chính bao gồm IE cũ. trong trình duyệt gần đây, chúng ta thậm chí có thể gọi forEach ngay trên nút bấm.

function unwrap(selector) {
    document.querySelectorAll('b').forEach( (item,i) => {
        item.outerHTML = item.innerText;
    } )
}