Finding width and height from htmlstring in javascript or jquery

Question

I need to search a string containing some html for a iframe. I will need to find the width and height.

string example:

var stringEx = '<iframe width="560" height="315" src="//www.youtube.com/embed/spr0ZHC2x2o" frameborder="0" allowfullscreen></iframe>'

Bill Criswell · Accepted Answer · 2014-06-06T20:39:48.427

3

You can make it a jQuery object by doing:

var $iframe = $('<iframe width="560" height="315" src="//www.youtube.com/embed/spr0ZHC2x2o" frameborder="0" allowfullscreen></iframe>');

Then you can use .attr() to grab the width and height attributes:

var width = $iframe.attr('width'),
    height = $iframe.attr('height');

Demo: http://jsbin.com/kuqajelo/1/edit?html,js,output

edited Jun 06 '14 at 20:39

answered Jun 06 '14 at 20:25

Bill Criswell

32,161
7
75
66

there is a note here about the type of the returned `width`, it's a string, so we may need to convert it to number if needed. – King King Jun 06 '14 at 20:29
Not to belabor this issue, but I ran it in jsperf (http://jsperf.com/regex-vs-jquery) against my "killing unicorns" regex string parsing answer below. Regex is over 150 TIMES FASTER. But you all use whatever you want ;) – Rodney G Jun 21 '14 at 05:06

Rodney G · Answer 2 · 2014-06-06T20:38:29.380

1

var stringEx = '<iframe width="560" height="315" src="//www.youtube.com/embed/spr0ZHC2x2o" frameborder="0" allowfullscreen></iframe>'
var w = stringEx.match(/width="(\d+)"/),
    h = stringEx.match(/height="(\d+)"/);

if (w) w = w[1]; // "560"
if (h) h = h[1]; // "315"

edited Jun 06 '14 at 20:38

answered Jun 06 '14 at 20:32

Rodney G

4,746
1
16
15

2

This will match the `marginwidth` and `marginheight` attributes as well, in an arbitrary `iframe` string. [Use `\b` to match word borders](http://www.regular-expressions.info/wordboundaries.html). Also, the double-quotes around the numbers are optional, and spaces may exist around the equals sign. `/\bwidth\s*=\s*"?(\d+)"?/` should do it. This is why [you shouldn't try to parse HTML with regex](http://stackoverflow.com/a/1732454/901048). – Blazemonger Jun 06 '14 at 20:45
I parsed a string. A string representing a single html element, yes, but a simple string nonetheless. That's no indication that the string is fetched from some external place, nor even that it's beyond his/her control. I'm comfortable using this technique (and do) for situations like this. I'm a killer of unicorns. Give me different/more parameters and I'll give a different/less-acid-inducing answer. – Rodney G Jun 06 '14 at 21:38

score 0 · Answer 3 · answered Jun 06 '14 at 20:31

Using regular expressions:

var stringEx = '<iframe width="560" height="315" src="//www.youtube.com/embed/spr0ZHC2x2o" frameborder="0" allowfullscreen></iframe>';

var width = /width="(\d+)"/.exec(stringEx)[1]; //looks for a match in the stringEx string
var height = /height="(\d+)"/.exec(stringEx)[1];

console.log(width); //560
console.log(height); //315

NOTE: If the match succeeds, the exec() method returns an array. The returned array has the matched text as the first item, and then one item for each capturing parenthesis that matched containing the text that was captured

Finding width and height from htmlstring in javascript or jquery

3 Answers3