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

时间:2017-04-20 16:42:09

标签: javascript regex 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)

我怎样才能发现这些?

1 个答案:

答案 0 :(得分: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) enter image description here