Question

我在正则表达式上很垃圾，真的！

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

例如：如果我使用.split()提供了1px方法，则会返回["1px",1,"px"]。如果我要提供，同样，10%它会返回["10%",10,"%"]。

可以这样做吗？

感谢您的帮助！

更新：如果提供["1.5em",1.5,"em"]，我还希望它返回1.5em。但是，如果可能的话，如果提供yellow仍然返回null。很遗憾，/^([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]*)(.*)/);

Answer 4

更复杂，但会返回解析后的数字，并为某些垃圾字符串返回null

String.prototype.unitSplit = function(parse){
    var retArr = this.toString().match(/^([\d]*\.?[\d]+)([^\d]*)$/);
    if(retArr && parse != undefined)
    {
        retArr[1] = (retArr[1].indexOf('.') >= 0)?parseFloat(retArr[1]):parseInt(retArr[1]);
    }
    return retArr;
}
/* Test cases */
"10px".unitSplit(); //["10px", "10", "px"]
"20%".unitSplit(true); //["20%", 20, "%"]
".8em".unitSplit(true); //[".8em", 0.8, "em"]
"127.0.0.1localhost".unitSplit(true); //null

Answer 5

function mySplit(str)
{
    var regex = /(\d*)([^\d]*)/;
    var t = "$1$2,$1,$2";
    return str.replace(regex,t).split(",");
}

.split（“1px”）到Javascript中的[“1px”，1，“px”]

5 个答案: