Getting img element from html string

Question

I have the following html string:

<html>
<head>
</head>
<body>
    <table>
        <tbody>
            <th>
              <tr>
                <img src=""/>
              </tr>
            </th>
        </tbody>
    </table>
</body>
</html>

Is there a way to get only the img element?

So in this case I want a string like this <img src=""/>.

More specific example:

$wikiDOM = $("<document>"+ wikiHTML+ "</document>");
var infobox = $wikiDOM.find('.infobox').html();
if(infobox != 'undefined' && infobox !== ""){
    var img = infobox.filter( 'img' );
    console.log( img[0].outerHTML );
}

where wikiHTML is the request i make to wikipedia api in json format for several searchterms.

Edit:

return from img and infobox:

image:[object Object] 
infobox[object Object] 
image:[object Object] 
infobox[object Object]
image:[object Object] 
infobox[object Object]
image:[object Object] 
infobox[object Object] 
image:[object Object] 
infobox[object Object]
image:[object Object] 
infobox[object Object]
image:[object Object] 
infobox[object Object] 
image:[object Object] 
infobox[object Object]

Do you actually have a string? or it that the source code?

musefan
– musefan

2014-07-29 14:40:25 +00:00
Commented Jul 29, 2014 at 14:40 — musefan
– musefan, Commented Jul 29, 2014 at 14:40
I actually have a string

João
– João

2014-07-29 14:47:53 +00:00
Commented Jul 29, 2014 at 14:47 — João
– João, Commented Jul 29, 2014 at 14:47

antyrat · Accepted Answer · 2014-07-29 15:10:06Z

6

Yes, for example in jQuery you will need to pass your string to $ function and then get <img> by img selector:

var html = $( '<html><head></head><body><table><tbody><th><tr><img src=""/></tr></th></tbody></table></body></html>' )
var img = html.filter( 'img' );
console.log( img );

To get img html code you will need:

console.log( img[0].outerHTML )

EDIT So according to your edit your code should be:

$wikiDOM = $("<document>"+ wikiHTML+ "</document>");
var infobox = $( $wikiDOM.find('.infobox').html() );
if(infobox != 'undefined' && infobox !== ""){
    var img = infobox.filter( 'img' );
    console.log( img[0].outerHTML );
}

As you can see I have added $() around $wikiDOM.find('.infobox').html(). You were getting undefined because innerHTML DOM property doesn't have filter method. Only jQuery do.

edited Jul 29, 2014 at 15:10

answered Jul 29, 2014 at 14:38

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

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

9 Comments

João Over a year ago

i am getting undefined in html.find('img');

antyrat Over a year ago

@João ok, use filter instead of find method. See example: jsfiddle.net/ex8Hk

João Over a year ago

In my case i have a var like this. var infobox = $wikiDOM.find('.infobox').html(); to get html of infobox from wikipedia. with filter i still get undefined.

Ramy Nasr Over a year ago

This is off-topic. But if you want to parse wikipedia, you might consider using their JSON API mediawiki.org/wiki/API:Data_formats

João Over a year ago

i am getting json wikipedia infobox for several searchterms but it is not relevant. because i than have the html inside the infobox. i added code to question.

|

Bla... · Accepted Answer · 2014-07-29 14:38:12Z

0

This would do:

var image = $("img").html();

answered Jul 29, 2014 at 14:38

Bla...

7,2887 gold badges31 silver badges47 bronze badges

1 Comment

antyrat Over a year ago

This will return nothing as html() method return's child nodes of current selector and works like innerHTML, you need outerHTML here

Collectives™ on Stack Overflow

Getting img element from html string

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related