用于在PostCSS中匹配断点的正则表达式

Question

我正在一个项目中工作，我需要摆脱高于600px的断点中的css代码

我必须使用一些正则表达式才能实现它，我有点难以检测到一些断点

我的大部分都在这里。

您可以在这里查看https://regex101.com/r/2FIadh/1/

我已经在测试字符串中放入了项目的所有断点，（不幸的是有些值在px中，而其他值在em中）所以我可以检查我是否有正确的匹配

目前我正在努力摆脱这些

(min-width: 64.0625em) 
(min-width: 90em)
(min-width: 768px)
(min-width: 61.25em)
(min-width: 67.5em)
(min-width: 77.1875em)
(min-width: 700px)
(min-width: 850px)

并保留这些

(min-width: 0px) and (max-width: 1363px)
(min-width: 0px) and (max-width: 1363px)

我怎样才能发现这些？

Answer 1

我不习惯正则表达式，所以我花了很长时间，但我尝试了一下：

匹配值高于600px

为此，我们可以匹配：

• A）没有前导零的4+位数
• B）以7,8或9
开头的3位数字
• C）以6开头但未跟随00
的3位数字
• D）600后跟小数，不仅是零

可以翻译为：

    |        A         |        B        |        C          |       D        | 
/(0*([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px)/g

var str = " 0222px | 365px | 435.765 px | 600.0000px | 600px | 600.03px | 601 px | 765px | 800.01px | 1000 px | 15562px";
var res = str.replace(/(\s0*([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px)/g,"<b>$1</b>");
document.body.innerHTML = res.split('|').join('<br>');

b{ color: red }

匹配值高于60em

为此，我们可以匹配：

• A）没有前导零的3+个数字
• B）以7,8或9
开头的2位数字
• C）以6开头但未跟0
的2位数字
• D）60后跟小数，不仅是零

可以翻译为：

    |        A         |       B      |      C        |       D       | 
/(0*([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em)/g

var str = " 022em | 36em | 43.765 em | 60.0000em | 60em | 60.03em | 61 em | 75em | 80.01em | 100 em | 1562em";
var res = str.replace(/(\s0*([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em)/g,"<b>$1</b>");
document.body.innerHTML = res.split('|').join('<br>');

b{ color: red }

将这些用于您的用例

/(\(min-width:\s*0*(([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px|(([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em))\))/g

var str = "(min-width: 1025px) | (min-width: 0) and (max-width: 35.625em) | (min-width: 480px) | (min-width: 1025px) | (min-width: 1025px) | (min-width: 64.0625em) | (min-width: 600px) | (min-width: 768px) | (min-width: 1364px) | (max-width: 30em) | (min-width: 48.125em) and (max-width: 54.375em) | (min-width: 48.1875em) and (max-width: 85.25em) | (min-width: 54.375em) and (max-width: 85.25em) | (min-width: 63.4375em) and (max-width: 85.25em) | (min-width: 85.25em) | (min-width: 1364px) | (min-width: 0px) and (max-width: 1363px) | (min-width: 375px) | (min-width: 0px) and (max-width: 1363px) | (min-device-pixel-ratio: 2) | (min-width: 35.625em) | (min-width: 29.375em) | (min-width: 44.375em) | (min-width: 49.375em) | (min-width: 61.25em) | (min-width: 67.5em) | (min-width: 77.1875em) | (min-width: 700px) | (min-width: 850px) | (min-width: 480px) and (max-width: 1866.66667px) | (min-width: 600px) and (max-width: 767px), (min-width: 769px)  | (min-width: 37.5em) and (max-width: 63.9375em) | (min-resolution: 1.5dppx) | (min-width: 30em) | (min-width: 37.5em) | (min-width: 64.0625em) | (min-width: 90em) | (min-width: 570px)";
var res = str.replace(/(\(min-width:\s*0*(([1-9]\d{3,}[\.\d]*|[7-9]\d{2}[\.\d]*|6(?!00)\d{2}[\.\d]*|600\.\d*[1-9]\d*)\s*px|(([1-9]\d{2,}[\.\d]*|[7-9]\d[\.\d]*|6(?!0)\d[\.\d]*|60\.\d*[1-9]\d*)\s*em))\)[^|]*)/g,"<b>$1</b>");
document.body.innerHTML = res.split('|').join('<br>');

b{ color: red }

Edited Regex101

正则表达式

（from regexper.com)