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

Question

我正在 js/jquery 应用程序中使用 CSS 值，为了使“20px”或“100%”或“4.58 em”等值可编辑，需要将它们分成值/单位对。我的正则表达式不完整，到目前为止，我经过几个小时的修补才想出了这个。

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”是一种将“20px”、“100%”、“4.58 em”、“440”或“9.4”等值拆分为包含值和单位的对象的方法。

它与“20px”、“100%”、“4.58 em”、“440”或“9.4”等值配合良好，

但是，正则表达式似乎不适用于负值和以小数点开头的值，例如“-40px”、“.40em”、“-80”、“.04” 等等

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

我将如何调整正则表达式或函数本身，以便它可以处理负值和以小数点开头的值？

感谢您回答这个问题并抽出时间。

Answer 1

感谢您的评论@Oleg V. Volkov、@Jaromanda X @Teemu 我已经尝试过这些建议，这似乎有效 v.match(/^([-.\d]+(?:.\d+)?)(.*)$/);谢谢奥列格...

我将再运行一些测试，然后确认其 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"、"290px"、"100%"、"480"、"4.80"、"20px"、"100%"、"4.58em"、"-40px"、".40em"、 “-80”，“.04”