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

Question

我在正則表達式上很垃圾，真的！

我想要的是將包含CSS屬性值的字符串拆分為[string,value,unit]數組。

例如：如果我使用1px提供.split()方法，它將返回["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(",");
}