Question

我有以下代码，

$(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, strong, i, 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" />

这甚至可能吗？

Answer 1

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

Demo at jsfiddle.net

Answer 2

使用正则表达式：

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

第一个替换删除了开始标记，第二个删除了结束标记。

请注意，有几个陷阱when using regex to match html。但在这种特殊情况下，这似乎是一个合理的选择（参见我对其他答案的评论）。

对于记录，这是我用来访问iframe内容文档的内容：

var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;

Answer 3

这是我的纯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);
    }
}

演示http://jsfiddle.net/alnitak/WvJAx/

它通过（递归地）将受限制的标记的子节点移出其父节点，然后在它们为空时删除这些标记。

Answer 4

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

你可以使用jQuery的.text（）方法分别获取每个元素的文本内容，并在从DOM中删除实际标记之前保存它，如果你想说，获取跨度的文本内容但是你不要不希望跨度再次出现在DOM中，或者您希望将其放在文档中的其他位置。

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

对于您尝试根据示例HTML进行的操作，您可能需要查看jQuery的分离方法：http://api.jquery.com/detach/

这将允许您将返回的子元素存储在稍后的其他位置。

jquery / javascript删除HTML标签但没有内容

4 个答案: