Hapus tag HTML tetapi pertahankan innerHtml

Saya memiliki beberapa HTML sederhana yang saya perlukan untuk menghapus pemformatan sederhana.

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

Saya perlu menghapus huruf tebal, tetapi membiarkan kalimatnya tetap utuh.

Bagaimana ini bisa dilakukan di jQuery?

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

Ini memilih semua <b>elemen, lalu gunakan.contents() untuk menargetkan konten teks <b>, lalu.unwrap() untuk menghapus <b>elemen induknya .

Untuk performa terbaik, selalu gunakan versi asli:

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 ] );
}

Ini akan jauh lebih cepat daripada solusi jQuery yang disediakan di sini.

Anda juga dapat menggunakan .replaceWith(), seperti ini:

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

Atau jika Anda tahu itu hanya string:

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

Ini dapat membuat perbedaan besar jika Anda membuka banyak elemen karena kedua pendekatan di atas secara signifikan lebih cepat daripada biaya .unwrap().

Cara paling sederhana untuk menghapus elemen html dalam dan mengembalikan hanya teks adalah fungsi JQuery .text () .

Contoh:

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

Demo jsFiddle

Bagaimana dengan ini?

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

Baris pertama menyalin konten HTML dari btag ke lokasi langsung setelah btag, dan kemudian baris kedua menghapus btag dari DOM, hanya menyisakan konten yang disalin.

Saya biasanya membungkus ini menjadi fungsi untuk membuatnya lebih mudah digunakan:

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

Semua kode sebenarnya Javascript murni, satu-satunya JQuery yang digunakan adalah untuk memilih elemen yang akan ditargetkan ( btag pada contoh pertama). Fungsinya hanya JS: D

Lihat juga:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

// 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();
    }
  }
};

Solusi asli lain (dalam kopi):

el = document.getElementsByTagName 'b'

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

el.parentNode.replaceChild docFrag, el

Saya tidak tahu apakah ini lebih cepat daripada solusi user113716, tetapi mungkin lebih mudah dimengerti untuk beberapa orang.

Jawaban paling sederhana adalah hembusan pikiran:

outerHTML didukung hingga Internet Explorer 4!

Ini dia untuk melakukannya dengan javascript bahkan tanpa 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')

Ini harus bekerja di semua browser utama termasuk IE lama. di peramban baru-baru ini, kita bahkan dapat memanggil masing-masing tepat pada nodelist.

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