javascript - Javascript 正则表达式匹配选项字符串

Question

我正在尝试在这两种情况下匹配 CSS 内联样式

width: 55px;

或者

width: calc(100% - 10px);

现在我可以解决第一种情况，并通过以下方式获得第二种情况的一部分：

/^width:\s*(calc\()*(([-+]?([0-9]*\.)?[0-9]*)(px|em|ex|%|in|cm|mm|pt|pc))/i

查看实时示例：http ://regexr.com?371o0

提前致谢

Answer 1

您可以简单地使用以下正则表达式来捕获width声明：

'font-size:10px; width: 1px;'.match(/\bwidth:([^;]*)/i) 
//["width: 1px;", " 1px"]

然后，如果您想验证它，您可以简单地执行以下操作：

function isValidCSSWidth(value) {
    var el = document.createElement('div'),
        style = el.style;

    style.width = value;

    return !!style.width.length;
}

isValidCSSWidth('calc(100% - 10px)'); //true
isValidCSSWidth('0'); //true
isValidCSSWidth('invalid'); //false

Answer 2

以下内容实际上会匹配这两行，但我不太喜欢它，因为您应该为此使用解析器：

^width:\s*(?:calc\()?(?:[0-9]+(?:p[ctx]|e[mx]|%|in|[cm]m)[\s+-]*)+\)?

正则表达式 101 演示

Answer 3

它可以用一个正则表达式来完成，尽管它相当复杂：

^width:\s*((?:calc\((\s*[-+]?\s*[0-9]+(px|em|ex|%|in|cm|mm|pt|pc)+)+\)\s*;$)|(\s*[-+]?\s*[0-9]+(px|em|ex|%|in|cm|mm|pt|pc)+)\s*;)$

这与您的示例和我能想到的其他一些“宽度”CSS 声明相匹配。

（编辑：我更正它现在总是检查关闭）当 calc 存在时）。