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
– user320550, Commented Oct 18, 2013 at 7: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
– user320550, Commented Oct 18, 2013 at 7:24
Probably too late to be of use, but can you not just wrap HTMLSTRING in a <p> before you make it a jQuery object? — Moob
– Moob, Commented Oct 18, 2013 at 22:23

Renan Araújo · Accepted Answer · 2015-09-17 13:22:06Z

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, 2015 at 13:22

Renan Araújo

3,65911 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aksu · Accepted Answer · 2015-05-02 16:35:30Z

18

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 2, 2015 at 16:35

aksu

5,2365 gold badges26 silver badges39 bronze badges

answered Oct 18, 2013 at 6:57

Nikhil N

4,5971 gold badge38 silver badges53 bronze badges

4 Comments

user320550 Over a year ago

Nikhil, which version of jQuery has the parseHTML. I can only see the parseJSON and parseXML API's as part of my jQuery.

user320550 Over a year ago

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?

Nikhil N Over a year ago

I can see parseHTML function in 1.8.0 source..code.jquery.com/jquery-1.8.0.js

TOPKAT Over a year ago

Hi, it's maybe a silly question, but how to get html string back ?

Collectives™ on Stack Overflow

Convert HTML string into Jquery Object

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related