0

I have a string like this:

width: 423px; height: 281px; margin-bottom: 5px; margin-right: 5px; display: inline-block; vertical-align: bottom; overflow: hidden;

I need to extract the width and height, without the px and dump all the other styles, so I can store them in two different variables, how can I do this?

ALSD Minecraft
  • 1,421
  • 3
  • 12
  • 18

4 Answers4

3

Your string is CSS code, so use a CSS parser. Luckily, browsers have built-in CSS parsers.

var text = "width: 423px; height: 281px; margin-bottom: 5px; margin-right: 5px; display: inline-block; vertical-align: bottom; overflow: hidden;",
    cssParser = document.createElement('div').style;
cssParser.cssText = text; // parse text
console.log(parseFloat(cssParser.width)); // 423
console.log(parseFloat(cssParser.height)); // 281
Oriol
  • 274,082
  • 63
  • 437
  • 513
1

To answer the question exactly as requested, a regular expression may be used to extract numbers from a string like this:

var a = 'width: 423px; height: 281px; margin-bottom: 5px; margin-right: 5px; display: inline-block; vertical-align: bottom; overflow: hidden;'
a.match(/width:\s*(\d+)px;/)[1]  // "423"

Similarly, the height can also be read like so: 

a.match(/height:\s*(\d+)px;/)[1]  // "281"

If this is actually a question about styles, perhaps you can get this sort of information from the .style attribute of an element.

document.getElementsByTagName('body')[0].style  // Various things
Brian
  • 7,394
  • 3
  • 25
  • 46
  • Hello, problem is I can get it from styles, because I need them before they are even applied, it's a strange case, but the regex worked perfectly, thx! – ALSD Minecraft Jul 03 '16 at 02:28
1

Or without regex :

var str = 'width: 423px; height: 281px; margin-bottom: 5px; margin-...';
var w = parseInt(str.substr(str.indexOf('width:')+6));
var h = parseInt(str.substr(str.indexOf('height:')+7));

If the input isn't normalised, a bit safer way :

var str = 'width: 423px; height: 281px; margin-bottom: 5px; margin-...';
var index,w,h;
index = str.indexOf('width:');
if(index == -1 || (index > 0 && [' ',';'].indexOf(str[index-1]) == -1)) w = 0;
else w = parseInt(str.substr(index+6)); 
index = str.indexOf('height:');
if(index == -1 || (index > 0 && [' ',';'].indexOf(str[index-1]) == -1)) h = 0;
else h = parseInt(str.substr(index+7));
ElDoRado1239
  • 3,938
  • 2
  • 16
  • 13
  • Try removing `height: 281px`. `h` will now be `423`, instead of the expected `NaN`! You should handle the case `indexOf` returns `-1` – Oriol Jul 03 '16 at 02:43
  • Well OP made it sound like the input is fairly normalised. And there was already an answer so I didn't intend this to be exactly rigorous. If there was no 'height:' but i.e. 'min-height:' would be present, it would fail too, I'm aware of that. – ElDoRado1239 Jul 03 '16 at 02:49
1

Here is my approach... Alerts height and width as well as outputs all found key/value pairs to console.

var values = "width: 423px; height: 281px; margin-bottom: 5px; margin-right: 5px; display: inline-block; vertical-align: bottom; overflow: hidden;"
var pairs = values.split(";");
var pairLength = pairs.length;
for (var i = 0; i < pairLength; i++) {

  var key = pairs[i].split(":")[0];
  var value = pairs[i].split(":")[1];
  if (key.trim() == "width")
    alert(value.replace("px", ""));
  if (key.trim() == "height")
    alert(value.trim().replace("px", ""));

  console.log("Key: " + key + " , " + "Value: " + value.replace("px", ""));

}

Fiddle : https://jsfiddle.net/u4w7xhu3/

Ozan Gunceler
  • 1,067
  • 11
  • 20
  • You do know that `parseInt('10px') === 10` and `parseInt('10%') === 10` and `parseInt('10em') === 10`? – Alon Eitan Jul 03 '16 at 02:34
  • I do @AlonEitan. I am considering this as string manipulation. You can never know what will come in the style and just got rid of the px as requested. – Ozan Gunceler Jul 03 '16 at 02:40
  • That's fine, I did upvote your answer, but just wanted to make sure you aware to this (As you do) – Alon Eitan Jul 03 '16 at 02:53