.split ("1px") в ["1px", 1, "px"] в Javascript

Question

Я - мусор в регулярных выражениях, правда!

Что бы я хотел - это разбить строку, содержащую значение свойства CSS, на массив [string,value,unit].

Например: если бы я поставил .split() метод с 1px, он вернул бы ["1px",1,"px"]. Если бы я поставил, аналогичным образом, 10% он бы вернул ["10%",10,"%"].

Можно ли это сделать?

Я ценю вашу помощь!

Обновление: я также хотел бы, чтобы он возвращал ["1.5em",1.5,"em"], если было указано 1.5em. Но, если возможно, по-прежнему возвращать ноль, если указано 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]*)(.*)/);

Answer 4

Сложнее, но вернет проанализированный номер и ноль для некоторых строк мусора

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