У меня есть простой HTML-код, который мне нужно для простого форматирования.
A nice house was found in <b>Toronto</b>.
Мне нужно удалить жирный шрифт, но оставить предложение неповрежденным.
Как это возможно в jQuery?
У меня есть простой HTML-код, который мне нужно для простого форматирования.
A nice house was found in <b>Toronto</b>.
Мне нужно удалить жирный шрифт, но оставить предложение неповрежденным.
Как это возможно в jQuery?
$('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.
Вы также можете использовать .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
Как насчет этого?
$("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
Также смотрите:
Другое собственное решение (в кофе):
el = document.getElementsByTagName 'b'
docFrag = document.createDocumentFragment()
docFrag.appendChild el.firstChild while el.childNodes.length
el.parentNode.replaceChild docFrag, el
Я не знаю, быстрее ли это решение user113716, но для некоторых может быть проще понять.