user2263572 user2263572 - 1 year ago 48
HTML Question

Parse <img> src attribute found within <script> and/or <noscript> tags

I have the following string:

<script src="[timestamp]&z=0"></script>
<a href="" target="_blank">
<img src="" border=0 width=320 height=50></a>

My goal is to parse out the src, width, and height attributes without using regular expressions or any type of indexOf()/loop/If logic.

This parsing will happen within a browser, so native browser functionality or jQuery are acceptable to use.

I have tried this:

//myString is equal to the string above
var $jQueryObject = $('<div>' + myString + '</div>');

It returns undefined. I assume this has something to do with trying to parse elements within noscript and script tags. Any help returning the src, height, and width elements would be appreciated.

Answer Source

Using DOMParser would be the simplest method - please see the browser compatibility table in the link provided, specifically that this WONT work for IE9 or earlier

var parser = new DOMParser(),
    doc = parser.parseFromString('yourString', 'text/html'),
    img = doc.querySelector('img');

Note: you can do the above like this to impress the girls:

var img = (new DOMParser()).parseFromString(document.querySelector('noscript').textContent, 'text/html').querySelector('img');

In the case of IE8/IE9, if you must support them, you can do something like

var div = document.createElement('div');
div.innerHTML = document.querySelector('noscript').textContent;
var img = div.querySelector('img');

But please be aware, the image will be fetched using this code