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

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

A nice house was found in Toronto. 

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

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

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

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


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

 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() выше способов значительно быстрее, чем стоимость .unwrap() .

Самый простой способ удалить внутренние элементы html и вернуть только текст будет функцией JQuery .text () .

Пример:

 var text = $('

A nice house was found in Toronto

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

jsFiddle Demo

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

 $("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, но для некоторых это может быть проще понять.

 // 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(); } } }; 
  • parse html string с jquery
  • Как получить код состояния HTTP с помощью jQuery?
  • load () устарел?
  • jQuery: keyPress Backspace не срабатывает?
  • jQuery document.ready vs самоназванная анонимная функция
  • Вызов функции ColdFusion с использованием AJAX
  • Установка jQuery?
  • Как связать всплывающие подсказки Twitter Bootstrap с динамически создаваемыми элементами?
  • Загрузите загрузочный контент Bootstrap с помощью AJAX. Это возможно?
  • Мобильный сайт - только принудительный пейзаж / без автоматического поворота
  • Ограничить перетаскиваемые объекты jQuery из перекрытия / столкновения с элементами-братьями
  • Давайте будем гением компьютера.