2

両方のケースで CSS インライン スタイルを一致させようとしています

width: 55px;

また

width: calc(100% - 10px);

今のところ、最初のケースを解決し、2 番目のケースの一部を取得できます。

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

実際の例を参照してください: http://regexr.com?371o0

前もって感謝します

4

3 に答える 3

2

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
于 2013-11-04T14:59:20.090 に答える
1

かなり複雑ではありますが、単一の正規表現で実行できます。

^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 が存在する場合、常に終了をチェックするように修正しました)。

于 2013-11-04T15:21:53.560 に答える
1

以下は実際には両方の行に一致しますが、これにはパーサーを使用する必要があるため、あまり好きではありません。

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

正規表現101のデモ

于 2013-11-04T15:20:54.510 に答える