Удалите тег HTML, но сохраните innerHtml - программирование

Удалите тег HTML, но сохраните innerHtml

У меня есть простой HTML-код, который мне нужно для простого форматирования.

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

Мне нужно удалить жирный шрифт, но оставить предложение неповрежденным.

Как это возможно в jQuery?

4b9b3361

Ответ 1

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

Это выбирает все элементы <b>, затем использует .contents() для таргетинга текстового содержимого <b>, затем .unwrap(), чтобы удалить его родительский элемент <b>.


Для максимальной производительности всегда начинайте с native:

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.

Ответ 2

Вы также можете использовать .replaceWith(), например:

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

Или, если вы знаете, это просто строка:

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

Это может иметь большое значение, если вы разворачиваете множество элементов, поскольку вышеприведенный подход значительно быстрее, чем стоимость .unwrap().

Ответ 3

Самый простой способ удалить внутренние элементы 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 Demo

Ответ 4

Как насчет этого?

$("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

Также смотрите:

Ответ 5

Другое собственное решение (в кофе):

el = document.getElementsByTagName 'b'

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

el.parentNode.replaceChild docFrag, el

Я не знаю, быстрее ли это решение user113716, но для некоторых может быть проще понять.