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

Question

I have the following string:

<script src="https://sys.com/lerers/adkljrver?c=28dsfsd1&w=323434230&h=5424523420&ord=[timestamp]&z=0"></script>
<noscript>
<a href="https://ving-sys.com/server/asfdsfsdr.bs?cn=brd&pli=107dsfsd486sdfds231&Page=&Pos=1979577902" target="_blank">
<img src="https://bs.faf-sys.com/Serving/adServer.bs?c=8534&cn=displaying&pli=1073924861&Page=&Pos=77902" border=0 width=320 height=50></a>
</noscript>

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>');
console.log($jQueryObject.find('img').attr('src'))

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.

If you want to edit MY answer because you've changed your mind about the question, please edit your question too, because you made my answer wrong with respect to your question. Lord knowss how 3 other people approved such an edit — Jaromanda X
– Jaromanda X, Commented Aug 21, 2016 at 21:23

Jaromanda X · Accepted Answer · 2016-08-21 21:21:25Z

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(),
    ns = document.querySelector('noscript'),
    doc = parser.parseFromString(ns.textContent, 'text/html'),
    img = doc.querySelector('img');
console.log(img.width);
console.log(img.height);
console.log(img.src);

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');
console.log(img.width);
console.log(img.height);
console.log(img.src);

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');
console.log(img.width);
console.log(img.height);
console.log(img.src);

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related