jquery/javascript删除HTML标记但不删除内容

我有以下代码

$(document.getElementById('messages_message-wysiwyg-iframe').contentWindow.document).keydown(function() {
        var iFrame =  document.getElementById('messages_message-wysiwyg-iframe');
        var iFrameBody;
        if ( iFrame.contentDocument ) 
        { // FF
            iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
        }
        else if ( iFrame.contentWindow ) 
        { // IE
            iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
        }
            console.info(iFrameBody.innerHTML);
    });

如果我得到一个iframe的内容，但是删除了所有不存在的html标记，我将尝试做什么

b、 坚强，我，a，u，img

但是，我不想删除任何文本，例如，如果iframe中有以下内容

<div class="box segment panel">
    <a href="http://www.google.com>hello world</a> 
    click this link and go far. 
    <img src="http://placehold.it/100x100" alt="Placeholder"/>
 </div>

<a href="http://www.google.com">hello world</a>  
click this link and go far.
</a>
<img src="http://placehold.it/100x100" alt="Placeholder" />

返回的内容如下：

<div class="box segment panel">
    <a href="http://www.google.com>hello world</a> 
    click this link and go far. 
    <img src="http://placehold.it/100x100" alt="Placeholder"/>
 </div>

<a href="http://www.google.com">hello world</a>  
click this link and go far.
</a>
<img src="http://placehold.it/100x100" alt="Placeholder" />

这可能吗

var iFrame = document.getElementById('messages_message-wysiwyg-iframe');
var iFrameDoc = iFrame.contentDocument || iFrame.contentWindow.document;
$(iFrameDoc).keydown(function() {
    var iFrameBody = $("body", iFrameDoc);
    var cleared = iFrameBody.clone();
    cleared.find("*:not(b,strong,i,a,u,img)").each(function() {
        var $this = $(this);
        $this.replaceWith($this.contents());
    });
    console.log(cleared.html());
});

---

我想你对如何描述你想做的事情有点困惑。当您谈论文本时，您指的是标记内部的innerHTML/text节点。我认为，你真正想要做的是抓住所有特定的内容和内容的结构，也就是iFrame的子元素

您可以使用jQuery的.text方法分别获取每个元素的文本内容，并在从DOM中删除实际标记之前保存这些内容，如果您想获取span的文本内容，但不希望span再位于DOM中，或者希望将其放置在文档中的其他位置

var elemText = $('span#mySpan').text();
$('span#mySpan').remove();

对于基于示例HTML尝试执行的操作，您可能需要了解jQuery的detach方法：

---

这将允许您存储返回的子元素，以便稍后附加到其他地方。

我认为您对如何描述您正在尝试执行的操作有点困惑。当您谈论文本时，您指的是标记内部的innerHTML/text节点。我认为，你真正想要做的是抓住所有特定的内容和内容的结构，也就是iFrame的子元素

您可以使用jQuery的.text方法分别获取每个元素的文本内容，并在从DOM中删除实际标记之前保存这些内容，如果您想获取span的文本内容，但不希望span再位于DOM中，或者希望将其放置在文档中的其他位置

var elemText = $('span#mySpan').text();
$('span#mySpan').remove();

对于基于示例HTML尝试执行的操作，您可能需要了解jQuery的detach方法：

这将允许您存储返回的子元素，以便稍后附加到其他地方。

使用正则表达式：

iFrameBody.innerHTML=iFrameBody.innerHTML.replace(/<[^(b|strong|i|a|u|img)]\b[^>]*>/gi,"").replace(/<\/[^(b|strong|i|a|u|img)]>/gi,"");

使用正则表达式：

iFrameBody.innerHTML=iFrameBody.innerHTML.replace(/<[^(b|strong|i|a|u|img)]\b[^>]*>/gi,"").replace(/<\/[^(b|strong|i|a|u|img)]>/gi,"");

---

以下是我的纯JS解决方案：

function sanitize(el) {

    if (el.nodeType !== 1) return;

    if (!/^(B|STRONG|I|A|U|IMG)$/.test(el.tagName)) {
        var p = el.parentNode;

        // move all children out of the element, recursing as we go
        var c = el.firstChild;
        while (c) {
            var d = c.nextSibling;  // remember the next element
            p.insertBefore(c, el);
            sanitize(c);
            c = d;                  // look at the next sibling
        }

        // remove the element
        p.removeChild(el);
    }
}

演示

---

它的工作原理是递归地将受限标记的子节点移出其父节点，然后在这些标记为空时删除它们。

以下是我的纯JS解决方案：

function sanitize(el) {

    if (el.nodeType !== 1) return;

    if (!/^(B|STRONG|I|A|U|IMG)$/.test(el.tagName)) {
        var p = el.parentNode;

        // move all children out of the element, recursing as we go
        var c = el.firstChild;
        while (c) {
            var d = c.nextSibling;  // remember the next element
            p.insertBefore(c, el);
            sanitize(c);
            c = d;                  // look at the next sibling
        }

        // remove the element
        p.removeChild(el);
    }
}

演示

---

它的工作原理是递归地将受限制标记的子节点移出其父节点，然后在这些标记为空时删除它们。

如果使用jQuery，则使用jQuery，而不是简单的JS和jq的疯狂混合。$'messages\u message-wysiwyg-iframe'而不是document.getElementById。。。等等。如果您使用jQuery，那么就使用jQuery，而不是简单的JS和jq的疯狂混合messages\u message-wysiwyg-iframe'而不是document.getElementById。。。等等。我认为如果可接受的元素嵌套在其他可接受的元素中，这将无法保存它们…@Alnitak:是的，我需要一些时间来让它工作。但是现在，克隆体中的每个非想要的元素都应该被它自己的子元素替换，将想要的html保留在体中。@Bergi我希望对于某些具有特定嵌套规则的元素类型（例如table，ulI）来说，这种情况会破坏，但我认为这仍然不起作用。。。这也是非常低效的，因为它会为每个不匹配的节点计算$this.contents，而简单的DOM操作方法会更有效。我认为如果可接受的元素嵌套在其他可接受的元素中，这将无法保留它们…@Alnitak:是的，我需要一些时间来让它工作。但是现在，克隆体中的每个非想要的元素都应该被它自己的子元素替换，将想要的html保留在体中。@Bergi我希望对于某些具有特定嵌套规则的元素类型（例如table，ulI）来说，这种情况会破坏，但我认为这仍然不起作用。。。这也是非常低效的，因为它将为每个不匹配的节点计算$this.contents，而简单的DOM操作方法会更有效。与Bergi的注释相同：对于某些元素类型，如table或ul，这将中断。@Christophe how？这些元素将被此代码删除，但它们的内部文本节点保持不变。啊-我明白了-你的意思是，因为可能会临时移动到包含它的外部，所以它将是非法的DOM。嗯……如果el=table，如何将头部、身体甚至tr移出元素？@Christophe这是一个棘手的问题-可能需要先从叶节点进行移动。我认为对我的代码稍作修改就可以实现这一点。与Bergi的注释相同：对于某些元素类型，如table或ul，这将中断。@Christophe how？这些元素将被此代码删除，但它们的内部文本节点保持不变。啊-我明白了-你的意思是，因为可能会临时移动到包含它的外部，所以它将是非法的DOM。嗯…如果el=桌子，你怎么能移动头部，身体

---

甚至tr离开元素？@Christophe这是一个棘手的问题-可能需要先从叶节点开始移动。我认为对我的代码稍加修改就可以实现这一点。