18 Stimmen

Entfernt jQuery einige HTML-Elemente aus einem String, wenn .html() verwendet wird?

Ich habe eine var, die eine vollständige HTML-Seite enthält, einschließlich head, html, body, etc. Wenn ich diese Zeichenfolge an die Funktion .html() übergebe, entfernt jQuery alle Elemente wie body, html, head usw., die ich nicht haben möchte.

Meine Daten-Var enthält:

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

Dann ist mein jQuery:

// data is a full html document string
data = $('<div/>').html(data);
// jQuery stips my document string!
alert(data.find('head').html());

Ich muss eine vollständige HTML-Seitenzeichenfolge bearbeiten, damit ich zurückgeben kann, was in dem Element ist. Ich möchte dies mit jQuery tun, aber es scheint, dass alle Methoden, append(), prepend() und html() alle versuchen, die Zeichenfolge in Dom-Elemente zu konvertieren, die alle anderen Teile einer vollständigen HTML-Seite zu entfernen.

Gibt es noch eine andere Möglichkeit, wie ich das machen kann? Ich würde gerne eine andere Methode verwenden. Mein endgültiges Ziel ist es, bestimmte Elemente innerhalb meiner Zeichenfolge zu finden, so dass ich dachte, jQuery wäre am besten, da ich so daran gewöhnt bin. Aber, wenn es geht zu trimmen und Teile meiner Zeichenfolge zu entfernen, werde ich für eine andere Methode suchen müssen.

Ideen?

12voto

jitter Punkte 52721

Nach ein paar schnellen Tests scheint es mir, dass dieses Verhalten nicht durch jQuery, sondern durch den Browser verursacht wird.

Wie Sie leicht selbst überprüfen können (DEMO http://jsbin.com/ocupa3 )

var data = "<html><head><title>Untitled Document</title></head><body><p>test</p></body></html>";
data = $('<div/>').html(data);
alert(data.html());

führt in verschiedenen Browsern zu unterschiedlichen Ergebnissen

Opera 10.10

<HEAD><TITLE>Untitled Document</TITLE></HEAD><P>test</P>

FF 3.6

<title>Untitled Document</title><p>test</p>

IE6

<P>test</P>

Das hat also nichts mit jQuery zu tun, sondern mit den Browsern, die einige Tags entfernen, wenn Sie eine ganze HTML-Zeichenkette in ein div einfügen. Aber Sie müssten den gesamten jQuery-Code durchgehen, um html() um sicher zu sein. Und Sie müssten das für alle Browser tun, da es mehrere verschiedene Möglichkeiten gibt, wie jQuery versucht, seine Aufgabe zu erfüllen.


Als Lösung empfehle ich Ihnen, einen (möglicherweise versteckten) iframe zu verwenden und den Inhalt dieses iframe auf die von Ihnen angegebene HTML-Zeichenfolge zu setzen. Aber seien Sie sich bewusst, dass es auch nicht einfach ist, mit iframes zu hantieren und deren Inhalt programmatisch zu ändern. Es gibt auch verschiedene browserbezogene Macken und Zeitprobleme.

4voto

ılǝ Punkte 3355

Hier ist eine Lösung, die den Körper, den Kopf und andere Attribute umfasst: mydoc = document.getElementById('NAME_OF_PREVIEW_FRAME').contentWindow.document; mydoc.write(HTML_CODE); mydoc.close();

2voto

Tobias Cohen Punkte 19666

Nein, die jQuery html Funktion sendet lediglich die Zeichenkette an die Elementfunktion innerHTML Eigenschaft, die eine Funktion des Browsers ist, die ihn anweist, den HTML-Code in DOM-Elemente zu zerlegen und sie der Seite hinzuzufügen.

Ihr Browser arbeitet nicht mit einer Seite als HTML-Daten, sondern als DOM und importiert/exportiert HTML.

JavaScript hat sehr gute Unterstützung regulärer Ausdrücke . Je nach der Komplexität Ihrer Aufgabe ist dies vielleicht die beste Methode zur Verarbeitung Ihrer Daten.

0voto

TM. Punkte 101846

Das Container-Div ist nicht erforderlich.

Haben Sie das schon ausprobiert?

var foo = $(data);  // data is your full html document string

Dann können Sie darin wie folgt suchen:

$('.someClass', foo); // foo is the document you created earlier

Aktualisierung:

Wie bereits in einer anderen Antwort erwähnt, kommt es auf den Browser an, wie er sich verhält.

Ich habe mir die jQuery-Dokumente und fand dies:

Wenn der HTML-Code komplexer ist als eine als ein einzelner Tag ohne Attribute, wie es wie im obigen Beispiel, ist die eigentliche Erstellung der Elemente durch des Browsers innerHTML Mechanismus. Konkret erstellt jQuery eine neue <div> Element und setzt das innerHTML Eigenschaft des Elements an die HTML Snippet, das übergeben wurde.

Wenn Sie also ein ganzes Html-Dokument als String verwenden, scheint es nicht anders zu sein, als wenn Sie die innerHTML Eigenschaft einer div Sie machen mit createElement .

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X