Question

我有一个这样的字符串：

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

我需要提取宽度和高度，没有px并转储所有其他样式，所以我可以将它们存储在两个不同的变量中，我该怎么做？

Answer 1

您的字符串是CSS代码，因此请使用CSS解析器。幸运的是，浏览器内置了CSS解析器。

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

Answer 2

要完全按照要求回答问题，可以使用正则表达式从字符串中提取数字，如下所示：

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"

同样，高度也可以这样读：

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

如果这实际上是关于样式的问题，也许您可以从元素的.style属性中获取此类信息。

document.getElementsByTagName('body')[0].style  // Various things

Answer 3

或没有正则表达式：

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));

如果输入未标准化，则更安全一点：

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));

Answer 4

这是我的方法...提醒高度和宽度，并将所有找到的键/值对输出到控制台。

＆＃13;

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", ""));

}

＆＃13;

小提琴：https://jsfiddle.net/u4w7xhu3/

在javascript中从字符串中提取宽度和高度

4 个答案: