将“20 em”、"100%“、”4.58em“、”-40 em“、".40em”、"-80“、".04”等值拆分为值/单位对

Question

我正在使用js/jquery应用程序中的CSS值，为了使诸如“20 be”或"100%“或”4.58em“这样的值可编辑，需要将它们分离为值/单元对。我的判断力是零碎的，到目前为止，经过几个小时的修修补补，我已经想出了这个办法。

split_unit : function (v) {
    if (typeof v === 'string' && v !== ""){
        var split = v.match(/^(\d+(?:\.\d+)?)(.*)$/);
        return {'value':split[1].trim(),  'unit':split[2].trim()};
    }
    else{
        return { 'value':v, 'unit':"" }
    }
}

"split_unit“是将”20 to“、"100%”、“4.58em”、"440“或"9.4”这样的值除以包含值和单位的对象的方法。

它与“20 em”、"100%“、”4.58em“、"440”或"9.4"等值工作得很好，

然而，正则表达式似乎没有处理以小数点开始的负值和值，比如so “-40 80”、".40em“、"-80”、".04"等等。

我可以在函数的开头替换小数点和'-‘减号/连字符，然后将其附加到值字符串的末尾，但是必须有一种更优雅的方法。

我如何调整正则表达式或函数本身，使其与负值和以小数点开始的值一起工作？

谢谢你的回答和时间。

Answer 1

谢谢你的评论@OlegV.Volkov，@Jaromanda @Teemu我已经尝试了这些建议，这似乎是有效的v.match(/^(-.\d+(?:.\d+)?)(.*)$/)；谢谢Oleg .

我将运行更多的测试，然后确认这是100%的工作。

split_unit : function (v) {
    if (typeof v === 'string' && v !== ""){
        var split = v.match(/^([-.\d]+(?:\.\d+)?)(.*)$/);
        return {'value':split[1].trim(),  'unit':split[2].trim()};
    }
    else{
        return { 'value':v, 'unit':"" }
    }
}

可以很好地处理以下字符串：

"-.280em“、”290 em“、"100%”、"480“、"4.80”、“20 em”、"100%“、”4.58em“、”-40 em“、".40em”、"-80“、".04”

Answer 2

使用以下完整代码：

// Getting all unit+value from a string:

var m='40px 80px 45% .30px -25em'.match(/((-?)(\d)*(\.?))(\d)+(%|\w)*/gmi);

// Getting values :
var val1= m[0].match(/((-?)(\d)*(\.?))(\d)+/gmi)[0];

// Getting Unit :
var unit1=m[0].replace(/((-?)(\d)*(\.?))(\d)+/gmi,'')[0];

因此，根据您的代码，您可以使用上面的代码(让v是从我上面的第一行代码返回的匹配)：

    split_unit : function (v) {
        if (typeof v === 'string' && v !== ""){

            return {'value':v.match(/((-?)(\d)*(\.?))(\d)+/gmi)[0], 
                    'unit':v.replace(/((-?)(\d)*(\.?))(\d)+/gmi,'')[0]};
        }
        else{
            return { 'value':v, 'unit':"" }
        }
    }

Answer 3

试一试：

var re = /(-?\d*(?:\.\d+)?)\s*(\D+)/;
var res = re.exec(".40 %");//  ==> [".40 %", ".40", "%"]

修订，允许单元为null：

var re = /(-?\d*(?:\.\d+)?)\s*(\D*)/;
var res = re.exec(".40");//  ==> [".40 %", ".40", ""]