.split("1px")到Javascript中的["1px",1,"px"]

Question

我在正则表达式上很垃圾,真的!

我想要的是将包含CSS属性值的字符串拆分为数组[string,value,unit].

例如:如果我提供了.split()方法,1px则返回["1px",1,"px"].如果我要供应,同样,10%它会回来["10%",10,"%"].

可以这样做吗？

我感谢你的帮助!

更新:["1.5em",1.5,"em"]如果1.5em提供的话,我也希望它返回.但是,如果可能的话,如果提供的话仍然返回null yellow.不幸的是/^([0-9]*\.?[0-9]*)(.*)/提供yellow将返回y,,y!

谢谢你们!

Answer 1

"1px".match(/(\d*\.?\d*)(.*)/)

产量

["1px", "1", "px"]

我已经更新了表达式,以匹配带有前导和尾随小数的实数.

var expr  = /(\d*\.?\d*)(.*)/,
    cases = [
    "1px",
    "1.px",
    "11.px",
    "11.1px",
    "11.11px",
    "1.11px",
    ".11px",
    ".1px",
    ".px" // Invalid numeric value, but still preserves unit and can be handled as seen below
];

for ( var i=0,l=cases.length; i<l; ++i ) {
    var r = cases[i].match(expr );
    console.log(r, parseFloat(r[1], 10) || 0);
}

结果

["1px", "1", "px"] 1
["1.px", "1.", "px"] 1
["11.px", "11.", "px"] 11
["11.1px", "11.1", "px"] 11.1
["11.11px", "11.11", "px"] 11.11
["1.11px", "1.11", "px"] 1.11
[".11px", ".11", "px"] 0.11
[".1px", ".1", "px"] 0.1
[".px", ".", "px"] 0

Answer 2

使用捕获组:

var matches = "100%".match(/^(\d+(?:\.\d+)?)(.*)$/);

你很幸运.match返回第一个位置完全匹配的数组,后跟每个组.
split这里可能是错的,因为你想保持完全匹配.['100', '%']例如,如果你想获得,你可以做到.split(/\b/).

已更新以启用分数.此外,当格式不匹配时,两个锚点的使用将不匹配[number][unit],因此null返回.

Answer 3

尝试:

cssProperty.match(/^([0-9]+\.?[0-9]*)(.*)/);