Convert HTML string into Jquery Object

Question

I have a HTML string which is a mix of text plus HTML tags, which i'm trying to convert into an object. So for e.g. my HTML string would look like:

Pay using your <img src="visa-src" /> or your <img src="mc-src" />

I'm using jquery 1.8.0 and tried using $(HTMLSTRING) however for some reason it strips out the text before the anchor and gives the rest, i.e. object with the children #img, #text and #img while the first text (Pay using your) gets stripped off

However lets say if the input is:

<img src="visa-src" /> or your <img src="mc-src" />

it correctly gives me the object with three child elements in it #img, #text and #img.

Are there any other ways to convert this properly?

Update: What i'm ultimately looking at is to change the each of the img src there in the HTML string and prepend with some host there.

Thanks.

@user1671639, i've updated my question with the img reference. — user320550, Oct 18 '13 at 07:20
@RGraham, that basically renders that into the DOM which is something im not looking for. I should have been more explicit. I've updated the question. — user320550, Oct 18 '13 at 07:24
Probably too late to be of use, but can you not just wrap HTMLSTRING in a `
` before you make it a jQuery object? — Moob, Oct 18 '13 at 22:23

score 33 · Answer 1 · answered Sep 17 '15 at 13:22

33

$.parseHTML() parses a string into an array of DOM nodes.

To create the object you need to add $():

$($.parseHTML(yourString))

Take a look at this fiddle: http://jsfiddle.net/j05ucnfv/

Reference: http://api.jquery.com/jQuery.parseHTML/

answered Sep 17 '15 at 13:22

Renan Araújo

3,533
11
39
49

score 16 · Accepted Answer · edited May 02 '15 at 16:35

16

Use

$.parseHTML()

instead of

$(HTMLSTRING)

See below JS Code..

var HTMLSTRING = 'Pay using your <img src="visa-src" /> or your <img src="mc-src" />';

var HTMLSTRING1 = '<img src="visa-src" /> or your <img src="mc-src" />';

console.log($.parseHTML(HTMLSTRING));
console.log($.parseHTML(HTMLSTRING1));

Demo Fiddle

edited May 02 '15 at 16:35

aksu

5,221
5
24
39

answered Oct 18 '13 at 06:57

Nikhil N

4,507
1
35
53

Nikhil, which version of jQuery has the parseHTML. I can only see the parseJSON and parseXML API's as part of my jQuery. – user320550 Oct 18 '13 at 07:17
ok looks like i don't get have the parseHTML as part of my jQuery (1.8.0-min.js). Any other ways to go about this? – user320550 Oct 18 '13 at 07:27
1

I can see parseHTML function in 1.8.0 source..http://code.jquery.com/jquery-1.8.0.js – Nikhil N Oct 18 '13 at 07:52
Hi, it's maybe a silly question, but how to get html string back ? – TOPKAT Jun 20 '16 at 22:09

Convert HTML string into Jquery Object

2 Answers2

Linked