405

আপনি কীভাবে কোনও jQuery অবজেক্টকে স্ট্রিংয়ে রূপান্তর করবেন?

jquery stringification

— chief7
সূত্র

602

আমি ধরে নিলাম আপনি সম্পূর্ণ এইচটিএমএল স্ট্রিংয়ের জন্য জিজ্ঞাসা করছেন। যদি এটি হয় তবে এর মতো কিছু কৌশলটি করবে:

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

এটি এখানে আরও গভীরতার সাথে ব্যাখ্যা করা হয়েছে , তবে মূলত আপনি আগ্রহের আইটেমটি মোড়ানো, ম্যানিপুলেশনগুলি করতে, এটি অপসারণ এবং এইচটিএমএল ধরতে একটি নতুন নোড তৈরি করেন।

যদি আপনি কেবল স্ট্রিং উপস্থাপনের পরে থাকেন তবে সাথে যান new String(obj)।

হালনাগাদ

আমি আসল উত্তরটি ২০০৯ সালে লিখেছি। ২০১৪ সালের হিসাবে এখন বেশিরভাগ প্রধান ব্রাউজারগুলি outerHTMLএকটি দেশীয় সম্পত্তি হিসাবে সমর্থন করে (উদাহরণস্বরূপ, ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরার ), তাই আপনি করতে পারেন:

$('#item-of-interest').prop('outerHTML');

— জন ফেমেনেলা
সূত্র

25

এটি ব্যর্থ হয় যে কেবল এটি করার কোনও পদ্ধতি নেই, তবে এটি নির্বিশেষে এটি একটি দুর্দান্ত সমাধান।

— স্টিভ

2

এটি মাথা এবং শরীরের ট্যাগগুলি সরিয়ে দেয়

— ǝlǝ

1

@ ব্যবহারকারী 4৮৪61১ এটি কোনও বৈধ ডোম নোড নয়, তবে এটির সাথে বাইরের এইচটিএমএলটি কল করার চেষ্টা করা ভুল হবে be (যা যা যেতে পারে তার কেবলমাত্র একটি ক্ষুদ্র উপসেট $(...)হ'ল বৈধ ডোম নোড))

— জন ফেমেনিলা

1

@ সম্ভবত এটি আপনাকে অভ্যন্তরীণ এইচটিএমএল বা সরলভাবে, উপাদানটির ভিতরে কী দেয়, যখন বহিরাগত HTML আপনাকে পুরো

— জাকিয়াস

2

দ্রষ্টব্য, আপনি হারাবেনdata

— ওলেগ

190

JQuery 1.6 এর সাথে এটি আরও মার্জিত সমাধান বলে মনে হচ্ছে:

$('#element-of-interest').prop('outerHTML');

— nickh
সূত্র

5

@ জিন-ফিলিপেলেক্লার্ক ফায়ারফক্স ১৫.০.১ (লিনাক্স) এ এটি কবজির মতো কাজ করে।

— ডেভ

51

নেটিভ এলিমেন্টটি ধরতে কেবল .get (0) ব্যবহার করুন এবং এর বাইরের এইচটিএমএল সম্পত্তি পেতে:

var $elem = $('<a href="#">Some element</a>');
console.log("HTML is: " + $elem.get(0).outerHTML);

— mppfiles
সূত্র

এটি আমার বৈশিষ্ট্যগুলিকেও ধরে রাখে তাই আরও ভাল। ধন্যবাদ!

— রোহিত

21

আপনি কি আরও কিছু নির্দিষ্ট হতে পারেন? আপনি যদি কোনও ট্যাগের ভিতরে এইচটিএমএল পাওয়ার চেষ্টা করে থাকেন তবে আপনি এই জাতীয় কিছু করতে পারেন:

এইচটিএমএল স্নিপেট:

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

JQuery:

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

— অ্যালেক্স রকওয়েল
সূত্র

9

এইচটিএমএল নোড (অবজেক্ট) -এ কী কী বৈশিষ্ট্য এবং পদ্ধতি উপলব্ধ তা সন্ধান করার সর্বোত্তম উপায় হ'ল কিছু করার জন্য:

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

JQuery 1.6+ থেকে আপনি আপনার স্ট্রিং আউটপুটে HTML ট্যাগগুলি অন্তর্ভুক্ত করতে কেবল আউটআরএইচটিএমএল ব্যবহার করতে পারেন:

var node = $("#my-node").outerHTML;

— crystalh
সূত্র

4

এটি $('#my-node').get(0).outerHTMLএমপিফাইলেসের জবাব হিসাবে রয়েছে

— স্কেলম্যাক্স

1

.outerHTMLআমার জন্য কাজ করেনি, কিন্তু .prop('outerHTML')করেছে।

— dnns

7

jQuery এখানে আছে, তাই:

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

সমস্ত HTML টি জিনিস ফেরত দিন:

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

— সর্বাধিক পরিমাপ
সূত্র

4

এটি আমার পক্ষে ভাল কাজ করছে বলে মনে হচ্ছে:

$("#id")[0].outerHTML

— জোহান ডেটমার
সূত্র

2

আমি এটি ব্যবহার করছিলাম তবে এটি ফায়ারফক্স 6.0.1 এর জন্য কাজ করবে বলে মনে হচ্ছে না।

— মিকং

2

গৃহীত উত্তরটি পাঠ্য নোডগুলি কভার করে না (অপরিজ্ঞাতটি মুদ্রিত হয়ে আছে)।

এই কোড স্নিপেট এটি সমাধান করে:

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>

স্নিপেট প্রসারিত করুন

— মার্টিন সজনাপকা
সূত্র

1

.Html () ব্যবহার করতে ক্লোন করতে এবং ডিওমে যুক্ত করার দরকার নেই, আপনি এটি করতে পারেন:

$('#item-of-interest').wrap('<div></div>').html()

— সেন্ট কিস
সূত্র

1

কিন্তু না wrap()আবৃত উপাদান ফিরে না উপাদান যা দিয়ে এটা আবৃত করা হয়েছিল? সুতরাং এটির মূল উপাদানটি নয় এইচটিএমএল দেওয়া উচিত (যদি না জিকুয়েরি ২০১২ সালের ফেব্রুয়ারী থেকে পরিবর্তন হয়)। #item-of-interest div

— ডেভিড বলেছেন মনিকা

0

jQuery.makeArray(obj)ইউটিলিটি ফাংশনটি ব্যবহার করা সম্ভব হতে পারে :

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

— duttyman
সূত্র

0

আপনি যদি কোনও এইচটিএমএল উপাদানটিকে কোথাও পাস করার জন্য এবং উপাদানটিকে আবার কোনও উপাদানকে বিশ্লেষণ করতে চান তবে উপাদানটির জন্য একটি অনন্য ক্যোয়ারী তৈরি করে দেখুন:

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

চেয়ে

//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();

— ইয়ারন হেলফার
সূত্র

-4

new String(myobj)

আপনি যদি পুরো বস্তুকে স্ট্রিংয়ে সিরিয়ালাইজ করতে চান তবে JSON ব্যবহার করুন ।

— Vasil
সূত্র