Bagaimana Anda mengubah objek jQuery menjadi string?

405

Bagaimana Anda mengubah objek jQuery menjadi string?

kepala7
sumber

Jawaban:

603

Saya menganggap Anda meminta string HTML lengkap. Jika itu masalahnya, sesuatu seperti ini akan membantu:

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

Ini dijelaskan secara lebih mendalam di sini , tetapi pada dasarnya Anda membuat simpul baru untuk membungkus item yang menarik, melakukan manipulasi, menghapusnya, dan mengambil HTML.

Jika Anda hanya setelah representasi string, maka ikuti new String(obj).

Memperbarui

Saya menulis jawaban asli pada tahun 2009. Pada tahun 2014, sebagian besar browser utama sekarang mendukung outerHTMLsebagai properti asli (lihat, misalnya, Firefox dan Internet Explorer ), sehingga Anda dapat melakukan:

$('#item-of-interest').prop('outerHTML');
John Feminella
sumber
25
Menyebalkan bahwa tidak ada metode untuk melakukan ini, tetapi ini adalah solusi yang bagus.
Steve
2
ini menghapus tag kepala dan tubuh
ılǝ
1
@ user85461 Itu bukan simpul DOM yang valid, jadi akan salah untuk mencoba memanggil outerHTML di atasnya untuk memulainya. (Hanya sebagian kecil dari apa yang bisa masuk $(...)adalah simpul DOM yang valid.)
John Feminella
1
@Moss itu memberi Anda html dalam, atau lebih sederhana, apa yang ada di dalam elemen, sedangkan outerHtml memberi Anda elemen secara keseluruhan
zakius
2
Perhatikan, Anda akan kalahdata
Oleg
190

Dengan jQuery 1.6, ini tampaknya menjadi solusi yang lebih elegan:

$('#element-of-interest').prop('outerHTML');
Nickh
sumber
5
@ Jean-PhilippeLeclerc Di Firefox 15.0.1 (linux) berfungsi seperti pesona.
dave
51

Cukup gunakan .get (0) untuk mengambil elemen asli, dan dapatkan properti outerHTML-nya:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);
mppfiles
sumber
Jauh lebih baik karena mempertahankan atribut saya juga. Terima kasih!
Rohit
21

Bisakah kamu sedikit lebih spesifik? Jika Anda mencoba memasukkan HTML ke dalam tag, Anda dapat melakukan sesuatu seperti ini:

Cuplikan HTML:

<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
sumber
9

Cara terbaik untuk mengetahui properti dan metode apa yang tersedia untuk simpul HTML (objek) adalah dengan melakukan sesuatu seperti:

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

Dari jQuery 1.6+ Anda cukup menggunakan outerHTML untuk memasukkan tag HTML dalam output string Anda:

var node = $("#my-node").outerHTML;
crystalh
sumber
4
itu $('#my-node').get(0).outerHTMLseperti dalam mppfiles' jawaban
schellmax
1
.outerHTMLtidak bekerja untuk saya, tetapi .prop('outerHTML')berhasil.
dnns
7

jQuery ada di sini, jadi:

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

Kembalikan semua barang HTML itu:

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

Ini sepertinya bekerja dengan baik untuk saya:

$("#id")[0].outerHTML
Johan Dettmar
sumber
2
Saya juga menggunakan ini tetapi ini sepertinya tidak berfungsi untuk Firefox 6.0.1.
mikong
2

Jawaban yang diterima tidak mencakup simpul teks (tidak terdefinisi dicetak).

Cuplikan kode ini menyelesaikannya:

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
sumber
1

Tidak perlu mengkloning dan menambah DOM untuk menggunakan .html (), Anda dapat melakukan:

$('#item-of-interest').wrap('<div></div>').html()
St Kiss
sumber
1
Tapi bukankah wrap()mengembalikan elemen yang dibungkus, bukan elemen yang dibungkus? Jadi ini harus memberikan html dari elemen induk #item-of-interest bukan itu div(kecuali jQuery berubah sejak Februari 2012).
David mengatakan mengembalikan Monica
0

Dimungkinkan untuk menggunakan jQuery.makeArray(obj)fungsi utilitas:

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

Jika Anda ingin merangkai elemen HTML untuk meneruskannya ke suatu tempat dan menguraikannya kembali ke suatu elemen, cobalah dengan membuat kueri unik untuk elemen tersebut:

// '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
})

dari

//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
sumber
-4
new String(myobj)

Jika Anda ingin membuat serialisasi seluruh objek menjadi string, gunakan JSON .

Vasil
sumber