Видаліть тег HTML, але зберігайте внутрішній HTML

У мене є простий HTML, який мені потрібен для простого форматування.

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

Мені потрібно зняти жирний шрифт, але речення залишити недоторканим.

Як це можливо в jQuery?

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

Це вибирає всі <b>елементи, потім використовує.contents() для націлювання текстового вмісту <b>, а потім.unwrap() для видалення його батьківського <b>елемента.

Для найбільшої ефективності завжди йдіть рідним:

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

Це буде набагато швидше, ніж будь-яке рішення jQuery, що надається тут.

Ви також можете використовувати .replaceWith() , як це:

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

Або якщо ви знаєте, що це просто рядок:

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

Це може мати велике значення, якщо ви розгортаєте багато елементів, оскільки будь-який підхід вище значно швидше, ніж вартість .unwrap().

Найпростішим способом видалення внутрішніх html-елементів та повернення лише тексту було б функція JQuery .text () .

Приклад:

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

Демонстрація jsFiddle

Як щодо цього?

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

Перший рядок копіює вміст HTML bтегу до місця безпосередньо після bтегу, а потім другий рядок видаляє bтег із DOM, залишаючи лише його скопійований вміст.

Я зазвичай перетворюю це на функцію, щоб полегшити його використання:

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

Весь код фактично чистий Javascript, єдиний використовуваний JQuery полягає в тому, щоб вибрати елемент для націлювання ( bтег у першому прикладі). Функція - просто чистий JS: D

Також дивіться:

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

Ще одне нативне рішення (у каві):

el = document.getElementsByTagName 'b'

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

el.parentNode.replaceChild docFrag, el

Я не знаю, чи це швидше рішення користувача111116, але це може бути легше зрозуміти.

Найпростіша відповідь - це видум:

externalHTML підтримується до Internet Explorer 4!

Ось це робити з javascript навіть без 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')

Це має працювати у всіх основних браузерах, включаючи старий IE. в останньому браузері ми навіть можемо зателефонувати за Кожен прямо у ноделісті.

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