我正在一个项目中工作,我需要摆脱高于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)
我怎样才能发现这些?
答案 0 :(得分:1)
我不习惯正则表达式,所以我花了很长时间,但我尝试了一下:
为此,我们可以匹配:
可以翻译为:
| 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 }
为此,我们可以匹配:
可以翻译为:
| 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 }