CODEWITHSUNDEEP
javascriptjqueryxmlparsing
mac
mac

Reputation: 113

find <img> tag inside text string

I have an xml document (from a feed), which I'm extracting values from:

$(feed_data).find("item").each(function() {
    if(count < 3) {
    //Pull attributes out of the current item. $(this) is the current item.
        var title = $(this).find("title").text();
        var link = $(this).find("link").text();
        var description = $(this).find("description").text();

Now inside "description" i need to get the img element, but this is causing me some problems. "descripttion" is a regular string element and it seems i can't call the ".find()" method on this, so what do i do?

I have tried calling .find():

var img = $(this).find("description").find("img");

But it's a no go. The img is wrapped in a span, but I can't get to this either. Any suggestions? I'd prefer to avoid substrings and regex solutions, but I'm at a loss.

I've also tried turning the "description" string into an xml object like so:

var parser = new DOMParser();
var desc = parser.parseFromString(test,'text/xml'); 

$(desc).find("img").each(function() {
    alert("something here");
});

But that doesn't work either. It seems like it would, but I get a "document not well formed" error.

Upvotes: 2

Views: 9402

Answers (3)

mac
mac

Reputation: 113

Hi and thanks for the prompt replies. I gave GregL the tick, as I'm sure his solution would have worked, as the principle is the same as what I ended up with. My solution looks like this:

    $(feed_data).find("item").each(function() {
        if(count < 3) {
            //Pull attributes out of the current item. $(this) is the current item.
            var title = $(this).find("title").text();
            var link = $(this).find("link").text();
            var description = $(this).find("description").text();

            var thumbnail = "";
            var temp_container = $("<div></div>");
            temp_container.html(description);
            thumbnail = temp_container.find("img:first").attr("src");

So wrap the string in a div, and then use "find()" to get the first img element. I now have the image source, which can be used as needed.

Upvotes: 4

GregL
GregL

Reputation: 38121

Try enclosing the contents of the description tag in a dummy div, that seemed to work better for me, and allowed jQuery's .find() to work as expected.

e.g.

$(feed_data).find("item").each(function() {
    if(count < 3) {
        //Pull attributes out of the current item. $(this) is the current item.
        var title = $(this).find("title").text();
        var link = $(this).find("link").text();
        var description = '<div>' + $(this).find("description").text() + '</div>';
        var image = $(description).find('img');

Upvotes: 6

Shlomi Komemi
Shlomi Komemi

Reputation: 5545

maybe you should try to convert the description text to html tag and then try to traverse it via jquery 

$('<div/>').html($(this).find("description").text()).find('img')

note: not tested

Upvotes: 1

Related Questions