7

  1. jQuery.parseHTML() produces an array. I'm looking for a way to convert it back to string. This is my top question.

  2. Is parseHTML() the only method to treat a string as html?

  3. Bassically, I was parsing my string as html so that I can use find() function of jQuery to match a certain element and then perfrom a replacement only on that portion of the code (see my previous question for more details). So, is parsing to html necessary for that?

Community
  • 1
  • 1
Iryn
  • 255
  • 2
  • 5
  • 13
  • *"So, is parsing to html necessary for that?"* Yes. if you must have it back in string form, you can wrap the dom collection in another element, select that element, then get it's html, however there's no guarantees that the html will be in the original format due to differences in browser html parsing. – Kevin B Nov 21 '13 at 21:26
  • 1
    `var string = $(string).find('element').replaceWith('other_element').end().get(0).outerHTML;` – adeneo Nov 21 '13 at 21:32
  • http://jsfiddle.net/5MjAJ/ – adeneo Nov 21 '13 at 21:34
  • @adeneo , How can I perform text-replacement instead of element replacement? – Iryn Nov 21 '13 at 21:44
  • With a regex, but you shouldn't be parsing HTML with regex'es. – adeneo Nov 21 '13 at 21:47
  • @adeneo , Please show me how, or explain more. – Iryn Nov 21 '13 at 21:49

5 Answers5

3

A simple function

function htmlToSource(selector){
 return $('<div />').append($(selector).clone()).html();
};

htmlToSource('body');
Community
  • 1
  • 1
Randy Stiven Valentín
  • 493
  • 3
  • 8
2

when i was trying to convert back from html object to string in my page i was not able to using the function 

var my_variable="$("<div></div>");
$("my_variable").html();

then i found the trick of doing that using the code below. it was really tricky

Example if you want to convert the "mySet" from the above comment variable back to string you can use this

 $(mySet).html($(mySet).clone()).html();
flipper
  • 146
  • 3
  • 11
1

Sounds like you want to just construct some DOM elements on the fly. You can do that by just passing an HTML string to the jQuery function ($()). No parseHTML() required.

var mySet = $('<div>blah blah blah<span>some stuff</span></div>');

// perform operations on the set just like you would a regular jQuery set
var divsInMySet = mySet.find('div');

// be aware some functions will return unexpected results since your set exists in memory not on the page
// for example anything related to positioning or visibility will fail
var whoKnows = mySet.position();
var dontDoThis = mySet.is(':visible');
jbabey
  • 45,965
  • 12
  • 71
  • 94
1

  1. jQueryElement.outerHTML();

  2. No. You can also use the jQuery shortcut: $('<input type="submit" />');

  3. No. You could also try string manipulation but there's a good chance that the jQuery method will be easier and more reliable.

Justin Niessner
  • 242,243
  • 40
  • 408
  • 536
  • 6
    outerHTML is not a jQuery function, it's a javascript property. Also, it doesn't work to do what you're seemingly claiming, that it will take a jQuery object and spit out a string with the entirety of the object's HTML. There's a great example of extending jQuery to do what you're claiming above, though, here: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html (jessica's answer) – Sean Kendle Apr 02 '15 at 20:01
1

This is a simple way to resolve the top question:

var $html = $($.parseHTML(html));//transform html string into a jQuery element
$html.append('<div id="other_test"></div>');//handling
console.log("string again, but edited", $html.get(0).outerHTML);//converting it to string again
Doglas
  • 642
  • 1
  • 11
  • 22