删除HTML标记但保留innerHtml

Ian*_*ink 143 jquery

我有一些简单的HTML,我需要删除简单的格式.

A nice house was found in <b>Toronto</b>.
Run Code Online (Sandbox Code Playgroud)

我需要删除粗体,但保留句子完整.

这怎么可能在jQuery中?

use*_*716 294

$('b').contents().unwrap();
Run Code Online (Sandbox Code Playgroud)

这将选择所有<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 ] );
}
Run Code Online (Sandbox Code Playgroud)

这将比这里提供的任何jQuery解决方案快得多.

  • +1我坐在那里写了一个关于`unwrap()`的几乎相同的答案,但不记得如何获取文本部分,忘记了`.contents()` - 非常好。 (2认同)
  • 虽然这是有效的,但与`.replacewith()`相比它也相当慢,因为额外的DOM遍历...如果它只是一个带有HTML的`<b>`标签,它会变得更快. (2认同)

Nic*_*ver 51

您也可以使用.replaceWith(),如下所示:

$("b").replaceWith(function() { return $(this).contents(); });
Run Code Online (Sandbox Code Playgroud)

或者如果你知道它只是一个字符串:

$("b").replaceWith(function() { return this.innerHTML; });
Run Code Online (Sandbox Code Playgroud)

如果您打开很多元素,这可能会产生很大的不同,因为上述任何一种方法都明显快于成本.unwrap().


Web*_*ist 13

删除内部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
Run Code Online (Sandbox Code Playgroud)

jsFiddle演示


izz*_*kin 6

看哪,因为最简单的答案是令人兴奋的:

Internet Explorer 4都支持外层 HTML

即使没有jQuery,这里也是用 javascript 来做的

element.outerHTML = element.innerHTML
Run Code Online (Sandbox Code Playgroud)

使用jQuery

var element = $('b')[0];
element.outerHTML = element.innerHTML;
Run Code Online (Sandbox Code Playgroud)

或者没有 jQuery

var element = document.querySelector('b');
element.outerHTML = element.innerHTML
Run Code Online (Sandbox Code Playgroud)

如果你想把它作为一个函数:

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')
Run Code Online (Sandbox Code Playgroud)

这应该适用于所有主要浏览器,包括旧的 IE。

如果您收到NoModificationAllowedErrorDOMException,则表示该元素没有父元素。通常,当您通过从 javascript 控制台创建一个新节点而不将其作为其他元素的子元素来尝试此答案时,您会得到这个。但是不要担心并记住文档中的任何元素至少有一个父<html></html>元素(元素)


Toa*_*gma 5

这个怎么样?

$("b").insertAdjacentHTML("afterend",$("b").innerHTML);
$("b").parentNode.removeChild($("b"));
Run Code Online (Sandbox Code Playgroud)

第一行将b标签的HTML内容复制到标签后的位置b,然后第二行b从DOM中删除标签,仅保留其复制的内容。

我通常将其包装到一个函数中以使其更易于使用:

function removeElementTags(element) {
   element.insertAdjacentHTML("afterend",element.innerHTML);
   element.parentNode.removeChild(element);
}
Run Code Online (Sandbox Code Playgroud)

所有代码实际上都是纯Javascript,唯一使用的JQuery是选择要定位的元素(b第一个示例中的标签)。该功能只是纯JS:D

还要看: