Wie konvertiert man ein jQuery-Objekt in eine Zeichenfolge?

405

Wie konvertiert man ein jQuery-Objekt in eine Zeichenfolge?

Chef7
quelle

Antworten:

602

Ich gehe davon aus, dass Sie nach der vollständigen HTML-Zeichenfolge fragen. Wenn dies der Fall ist, reicht so etwas aus:

$('<div>').append($('#item-of-interest').clone()).html(); 

Dies wird hier ausführlicher erläutert , aber im Wesentlichen erstellen Sie einen neuen Knoten, um das interessierende Element zu verpacken, die Manipulationen durchzuführen, es zu entfernen und den HTML-Code abzurufen.

Wenn Sie nur nach einer Zeichenfolgendarstellung suchen, gehen Sie mit new String(obj).

Aktualisieren

Ich habe die ursprüngliche Antwort im Jahr 2009 geschrieben. Ab 2014 unterstützen die meisten gängigen Browser outerHTMLeine native Eigenschaft (siehe z. B. Firefox und Internet Explorer ). Sie können also Folgendes tun:

$('#item-of-interest').prop('outerHTML');
John Feminella
quelle
25
Es ist schade, dass es keine Methode gibt, um dies zu tun, aber dies ist trotzdem eine großartige Lösung.
Steve
2
Dies entfernt die Kopf- und Körper-Tags
ılǝ
1
@ user85461 Das ist jedoch kein gültiger DOM-Knoten, daher wäre es falsch, zunächst zu versuchen, OuterHTML darauf aufzurufen. (Nur eine winzige Teilmenge von dem, was hineingehen kann, $(...)ist ein gültiger DOM-Knoten.)
John Feminella
1
@ Moos es gibt Ihnen innere HTML oder einfacher, was innerhalb des Elements ist, während äußere HTML gibt Ihnen Element als Ganzes
Zakius
2
Beachten Sie, dass Sie verlieren werdendata
Oleg
190

Mit jQuery 1.6 scheint dies eine elegantere Lösung zu sein:

$('#element-of-interest').prop('outerHTML');
Nickh
quelle
5
@ Jean-PhilippeLeclerc Unter Firefox 15.0.1 (Linux) funktioniert es wie ein Zauber.
Dave
51

Verwenden Sie einfach .get (0), um das native Element abzurufen und dessen äußere HTML-Eigenschaft abzurufen:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);
mppfiles
quelle
So viel besser, als es auch meine Attribute behält. Vielen Dank!
Rohit
21

Können Sie etwas genauer sein? Wenn Sie versuchen, den HTML- Code in ein Tag zu integrieren, können Sie Folgendes tun:

HTML-Snippet:

<p><b>This is some text</b></p>

jQuery:

var txt = $('p').html(); // Value of text is <b>This is some text</b>
Alex Rockwell
quelle
9

Der beste Weg, um herauszufinden, welche Eigenschaften und Methoden einem HTML-Knoten (Objekt) zur Verfügung stehen, besteht darin, Folgendes zu tun:

console.log($("#my-node"));

Ab jQuery 1.6+ können Sie OuterHTML verwenden, um die HTML-Tags in Ihre Zeichenfolgenausgabe aufzunehmen:

var node = $("#my-node").outerHTML;
Kristallh
quelle
4
es ist $('#my-node').get(0).outerHTMLwie in der Antwort von
mppfiles
1
.outerHTMLhat bei mir nicht funktioniert, aber .prop('outerHTML')funktioniert.
dnns
7

jQuery ist hier oben, also:

jQuery.fn.goodOLauterHTML= function() {
    return $('<a></a>').append( this.clone() ).html();
}

Gib all das HTML-Zeug zurück:

$('div' /*elys with HTML text stuff that you want */ ).goodOLauterHTML(); // alerts tags and all
Max Meents
quelle
4

Das scheint für mich gut zu funktionieren:

$("#id")[0].outerHTML
Johan Dettmar
quelle
2
Ich habe dies auch verwendet, aber dies scheint für Firefox 6.0.1 nicht zu funktionieren.
Mikong
2

Die akzeptierte Antwort deckt keine Textknoten ab (undefiniert wird ausgedruckt).

Dieses Code-Snippet löst es:

var htmlElements = $('<p><a href="http://google.com">google</a></p>↵↵<p><a href="http://bing.com">bing</a></p>'),
    htmlString = '';
    
htmlElements.each(function () {
    var element = $(this).get(0);

    if (element.nodeType === Node.ELEMENT_NODE) {
        htmlString += element.outerHTML;
    }
    else if (element.nodeType === Node.TEXT_NODE) {
        htmlString += element.nodeValue;
    }
});

alert('String html: ' + htmlString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Martin Sznapka
quelle
1

Sie müssen nicht klonen und zum DOM hinzufügen, um .html () zu verwenden. Sie können Folgendes tun:

$('#item-of-interest').wrap('<div></div>').html()
St. Kuss
quelle
1
Aber gibt wrap()das umschlossene Element nicht zurück , nicht das Element, mit dem es umbrochen wurde? Dies sollte also das HTML des #item-of-interest nicht übergeordneten divElements geben (es sei denn, jQuery wurde seit Februar 2012 geändert).
David sagt, Monica
0

Möglicherweise kann die jQuery.makeArray(obj)Dienstprogrammfunktion verwendet werden:

var obj = $('<p />',{'class':'className'}).html('peekaboo');
var objArr = $.makeArray(obj);
var plainText = objArr[0];
Duttyman
quelle
0

Wenn Sie ein HTML-Element stringifizieren möchten, um es irgendwo zu übergeben und an ein Element zurückzugeben, erstellen Sie eine eindeutige Abfrage für das Element:

// 'e' is a circular object that can't be stringify
var e = document.getElementById('MyElement')

// now 'e_str' is a unique query for this element that can be stringify 
var e_str = e.tagName
  + ( e.id != "" ? "#" + e.id : "")
  + ( e.className != "" ? "." + e.className.replace(' ','.') : "");

//now you can stringify your element to JSON string
var e_json = JSON.stringify({
  'element': e_str
})

als

//parse it back to an object
var obj = JSON.parse( e_json )

//finally connect the 'obj.element' varible to it's element
obj.element = document.querySelector( obj.element )

//now the 'obj.element' is the actual element and you can click it for example:
obj.element.click();
Yaron Helfer
quelle
-4
new String(myobj)

Wenn Sie das gesamte Objekt in eine Zeichenfolge serialisieren möchten, verwenden Sie JSON .

Vasil
quelle