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 
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,"");

最初の置換は開始タグを削除し、2 番目は終了タグを削除します。

正規表現を使用して html を照合する場合、いくつかのトラップがあることに注意してください。しかし、この特定のケースでは、それは合理的な選択のようです（他の回答に関する私のコメントを参照）。

記録のために、これは私が iframe のコンテンツ ドキュメントにアクセスするために使用するものです。

var doc=ifr.contentWindow||ifr.contentDocument;
if (doc.document) doc=doc.document;
于 2012-11-24T21:29:30.807 に答える
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 に答える
-1

自分がやろうとしていることをどのように説明するかについて、少し混乱していると思います。「テキスト」について話すときは、タグ内の innerHTML/text ノードを参照しています。あなたが本当にやりたいことは、特定のコンテンツとコンテンツの構造、つまり iFrame の子要素をすべて取得することだと思います。

jQuery の .text() メソッドを使用して、各要素のテキスト コンテンツを個別に取得し、DOM から実際のタグを削除する前にそれを保存できます。たとえば、スパンのテキスト コンテンツを取得したいが、したくない場合スパンを DOM に配置するか、ドキュメントの別の場所に配置します。

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

サンプル HTML に基づいて何をしようとしているのかについては、jQuery の detach メソッドを調べてください: http://api.jquery.com/detach/

これにより、返された子要素を保存して、後で別の場所に追加できます。

于 2012-11-24T21:16:37.743 に答える