2

我有以下代码，

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

这甚至可能吗？

4

4 回答 4

0

这是我的纯 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/

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

于 2012-11-24T21:49:50.657 回答
0 
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());
});

jsfiddle.net 上的演示

于 2012-11-24T21:15:43.443 回答
0

使用正则表达式：

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

第一次替换删除开始标签，第二次删除结束标签。

请注意，使用正则表达式匹配 html 时有几个陷阱。但在这种特定情况下，这似乎是一个合理的选择（参见我对其他答案的评论）。

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

var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
于 2012-11-24T21:29:30.807 回答
-1

我认为你对如何描述你正在尝试做的事情有点困惑。当您谈论“文本”时，您指的是标签内的 innerHTML/text 节点。我认为，您真正想做的是获取所有特定内容和内容的结构，也就是 iFrame 的子元素。

您可以使用 jQuery 的 .text() 方法单独获取每个元素的文本内容并在从 DOM 中删除实际标签之前保存它，如果您想说，获取跨度的文本内容但您不想要跨度不再位于 DOM 中，或者您想将其放置在文档中的其他位置。

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

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

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

于 2012-11-24T21:16:37.743 回答