如何正确构建带后向否定断言的正则表达式？WebStorm样式替换场景

你的需求是找出SCSS代码中包含未被vw(...)包裹的像素值（如25px）的整行，同时排除所有像素值都在vw()内的行（比如border-radius: vw(20px);这类行）。

问题分析 #

你原来的正则(?<!vw\()(-?[0-9]*\.?[0-9]+px)只能匹配单个未被vw(前缀的像素值，但无法定位到整行，而且没考虑到像素值后面跟着)的情况（也就是vw(xxxpx)里的像素值），所以没法满足“选中整行”的需求。

正确的正则表达式 #

在WebStorm的查找框中使用以下正则，就能精准匹配符合要求的整行：

^.*(?<!vw\()(-?\d*\.?\d+px)(?!\)).*$

正则解释 #

• ^ 和 $：锁定整行的开头和结尾，确保匹配的是完整一行
• .*：匹配行内任意前置/后置内容
• (?<!vw\()：负向回顾断言，确保像素值前面没有vw(前缀
• (-?\d*\.?\d+px)：匹配所有合法像素值，支持正负号、整数、小数（比如25px、-10.5px、.5px）
• (?!\))：负向先行断言，确保像素值后面没有)后缀，彻底排除vw(xxxpx)里的像素值

WebStorm使用步骤 #

• 按下Ctrl+F打开查找栏
• 勾选查找框右侧的Regex选项（正则模式）
• 粘贴上面的正则表达式
• 点击「Find All」即可选中所有符合要求的行

测试你的示例代码：

• 会选中：padding: 25px 30px;、margin-top: 10px;
• 会排除：box-shadow: 0 vw(20px) vw(30px) rgba(10, 9, 3, 0.2);、border-radius: vw(20px);

内容的提问来源于stack exchange，提问作者Alex Pavlov