Jquery 删除HTML标记，但保留innerHtml

我有一些简单的HTML，我需要剥离简单的格式

在多伦多发现了一座漂亮的房子。

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

在jQuery中这是怎么可能的

$('b').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解决方案快得多。

您也可以使用，如下所示：

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

或者，如果您知道它只是一个字符串：

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

---

如果您要展开大量元素，这会产生很大的差异，因为上述任何一种方法都比成本高。

删除内部html元素并仅返回文本的最简单方法是

例如：

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

var text=$（“在多伦多发现了一座漂亮的房子”
”）；
警报（text.html（））；
//在多伦多发现了一所漂亮的房子
警报（text.text（））；
////在多伦多发现了一所漂亮的房子

另一种天然溶液（咖啡中）：

---

我不知道它是否比user113716的解决方案快，但对一些人来说可能更容易理解。

这个怎么样？

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

第一行将

b

标记的HTML内容直接复制到

b

标记后面的位置，然后第二行从DOM中删除

b

标记，只保留其复制的内容

我通常将其包装成一个函数，以使其更易于使用：

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

所有代码实际上都是纯Javascript，唯一使用的JQuery是选择要定位的元素（第一个示例中的

b

标记）。该函数只是纯JS:D

另请看：

---

瞧，最简单的答案是令人兴奋的：

支持下至Internet Explorer 4 下面是使用javascript来完成这项工作，即使不使用jQuery

element.outerHTML = element.innerHTML

使用jQuery

元素=$（'b'）[0]
或者不带jQuery
element=document.querySelector（'b'）

如果您希望将其作为功能：

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。在最近的浏览器中，我们甚至可以在节点列表上调用forEach right

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

+1我坐在那里写了一个几乎相同的关于
unwrap（）
的答案，不记得如何获取文本部分，忘记了
.contents（）
-太好了。虽然这样做有效，但与
.replacewith（）相比也相当慢
由于额外的DOM遍历…如果它是一个只包含HTML的
标记，则速度会更快。此外，如果您只想打开特定的跨度或字体标记，可以执行以下操作：$（“.className font”）.contents（）.unwrap（）；如果html是abcabc，则换行符不保持？如果用于断开线，我如何保持它@用户113716谢谢，这非常有帮助。我在
parent.removeChild（…
之后添加了合并相邻文本节点的功能。如果您不断修改页面，这会很有帮助。尼克，我也很喜欢您的答案。我选择了另一个，因为我将在我的iPad应用程序（本地数据）中使用此功能的标记/文本数量太多了很小，所以性能不太重要。Partick的答案对我来说比较简单。我对两个伟大的解决方案进行了梳理，但我只能给其中一个检查。@BahaiResearch.com-如果性能不是问题，那么就绝对简单……我只是为以后可能会关注它的其他人提供这一点：）我试图将这个示例用于一个文本框，但它让我很痛苦，因为其中的内容是html标记，我希望对其进行评估，而不仅仅是显示为文本。我最终使用：$（'textarea'）.replaceWith（函数（）{return$（this.val（）；}）；在Safari中不起作用：“NoModificationLowederRor:对象无法修改。”我刚刚在Safari上试过，它起作用了。您可以使用safari在stackoverflow页面上的任何元素上进行尝试。但是，如果您创建了一个元素，而该元素还不在任何其他元素中，那么在操作该元素时将获得NoModificationLowerRor。如果将该元素放在另一个元素中，即使这两个元素都不在DOM中，也不会出错。
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')

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