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?

3

4 Answers 4

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

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

1 Comment

Best option so far!
2

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

1 Comment

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!
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/

3 Comments

You do know that parseInt('10px') === 10 and parseInt('10%') === 10 and parseInt('10em') === 10?
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.
That's fine, I did upvote your answer, but just wanted to make sure you aware to this (As you do)
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)); 

2 Comments

Try removing height: 281px. h will now be 423, instead of the expected NaN! You should handle the case indexOf returns -1
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.