如何在重用部分值的同时查找和替换文件值？答案

【问题标题】：How to find and replace file values while reusing parts of the values?如何在重用部分值的同时查找和替换文件值？
【发布时间】：2022-01-08 19:37:54
【问题描述】：

我想将数千个硬编码的 CSS 像素值更改为一个可重复使用该值的变量，这样如果值为 height: 100px;，那么新值将是 height: calc(100px / var(--resoRatio);。而且我需要考虑多次包含“px”的行。

For each line
   for each 'px'
       move to the left until either a ':', ',' or ' ' (space) is identified
       select the remaining value along with 'px' starting from first detected colon, comma or space
       store selection in variable X
       replace content after ':' with 'calc(X / var(--resoRatio))'

这可以通过 Visual Studio Code 查找并替换为正则表达式来完成吗？

【问题讨论】：

据我了解，您可以在 Visual Studio Code 中选择要替换的值（在您的情况下为 'height: 100px;' ），然后按 ctrl + shift + L 它会选择所有匹配的值，然后您可以放置新值。
如果所有值都是 100 像素，它会起作用，但是在这种情况下，像素之前的数字会因情况而异。所以我想使用每个像素前面的数字，并在一个变量中重新使用它，我用它替换它。
很难一口气做到这一点，但你可以试试 select ''px;或 'px' 并按 ctrl + shift + L 然后按右箭头键然后按 ctrl + shift + 左箭头键它将选择整个值。例如10 像素、100 像素、1000 像素
因为我有 12,000 多个这样的值要在许多文件中更改，所以我正在寻找一种编程方法。

标签： regex visual-studio-code

【解决方案1】：

进行正则表达式搜索

height:\s*(\d+px)

如果您有小数（100.3px），请使用

height:\s*([\d.]+px)

替换为

height: calc($1 / var(--resoRatio))

编辑

如果你想要通用属性，你可以多次应用

搜索

(\w+)\s*:\s*(\d+px)

替换为

$1: calc($2 / var(--resoRatio))

【讨论】：

不错！完美，虽然我要的是通用版本（不是特定高度），但我看到了它的逻辑，只需删除 'height:' 并在前面插入一个空格，'\s*(\d+px)' 我能够得到我需要的东西！谢谢！
@danefondo 通过添加额外的捕获组，您也可以捕获属性，现在您可以应用搜索替换额外时间
哇！谢谢！太酷了！！
是否可以创建过滤器来避免某些属性，例如'border-radius'
将(\w+) 替换为(height|width) 和任何其他属性，但这会命中max-height，可能在新行上开始每个属性并使用^\s*(height|width)