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

Regular Expression for matching breakpoints in PostCSS

我在一个项目中工作，我需要删除高于 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)

我怎样才能检测到这些？

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

匹配值大于 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></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></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></b>");
document.body.innerHTML = res.split('|').join('<br>');

b{ color: red }

Edited Regex101

正则表达式图

(from regexper.com)