Question

我有一些简单的HTML，我需要删除简单的格式。

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

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

这在jQuery中怎么可能？

Answer 1

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

选择所有<b>个元素，然后选择uses .contents()以定位<b>的文本内容，then .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 ] );
}

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

Answer 2

您还可以使用.replaceWith()，如下所示：

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

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

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

如果您要解开很多元素，这可能会产生很大的不同，因为上面的任何一种方法都是significantly faster而不是.unwrap()的费用。

Answer 3

删除内部html元素并仅返回文本的最简单方法是JQuery .text() function。

示例：

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

Answer 4

这个怎么样？

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

另见：

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

Answer 5

另一种原生解决方案（咖啡中）：

el = document.getElementsByTagName 'b'

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

el.parentNode.replaceChild docFrag, el

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

Answer 6

// 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();
    }
  }
};

Answer 7

最简单的答案就是：

直到 Internet Explorer 4都支持

outerHTML！

即使没有jQuery，也可以使用javascript

SELECT actor, COUNT(actor) as c 
FROM movie a inner join dir b 
on a.moviename=b.moviename  GROUP BY actor
HAVING COUNT(actor)=(
SELECT MAX(mycount) 
FROM ( 
SELECT actor, COUNT(actor) as mycount 
FROM movie a inner join dir b 
on a.moviename=b.moviename 
GROUP BY actor)t);

这应该可以在所有主要的浏览器中使用，包括旧版IE。在最近的浏览器中，我们甚至可以直接在节点列表上调用forEach。

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')

删除HTML标记但保留innerHtml

7 个答案:

outerHTML！