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

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, 强, 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

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

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