Question

我有一个旧的 css 项目，它使用 px 作为默认单位。

现在项目需要翻新，我需要使用VSCode搜索替换将所有px替换为rem，比例为10px = 1rem

20px 应该转换为 2rem，但是 2.0rem 也可以，我可以在之后去掉尾随的 .0。

但如果单位太小，小于 5px，我不应该更换它。

是的，对于某些规则，px 有一些小数点......如果更容易的话就发出它。

示例数据

font-size: 10px;
border: 0px;
margin-top: 4px;    // dont touch
margin-bottom: 12px;
margin-right: 50%;
margin-left: -12px;
padding-left: 120px;
padding-right: 8px;
border-radius: calc(50% - 1px);   // dont touch
grid-template-columns: 1fr 44px 1fr;
margin-top: 36.4px;
border-width: 10.5px;
border-width: .3px;  // dont touch
border-width: .6px;   // dont touch
border-width: 3.3px;  // dont touch
border-width: 6.6px;
margin-left: -1px;    // dont touch

替换后的期望输出

font-size: 1rem;
border: 0rem;
margin-top: 4px;    // dont touch
margin-bottom: 1.2rem;
margin-right: 50%;
margin-left: -1.2rem;
padding-left: 12rem;
padding-right: .8rem;
border-radius: calc(50% - 1px);   // dont touch
grid-template-columns: 1fr 4.4rem 1fr;
margin-top: 3.64rem;
border-width: 1.05rem;
border-width: .3px;  // dont touch
border-width: .6px;   // dont touch
border-width: 3.3px;  // dont touch
border-width: .66rem;
margin-left: -1px;    // dont touch

这是我一直在尝试但仍然无法做到的事情

\b(?![1234]px)(\d*)(\d)(?:\.(\d+))?px\b

$1.$2$3rem

这是一个test project on regex101

Answer 1

一个选项可能是在替换组 . 中使用 $1.$2$3rem，然后将 .0rem; 替换为 0rem;

\b(?![1-4](?:\.\d+)?px)(?<!(?<!\S)\.)(\d*)(\d)(?:\.(\d+))?px\b

说明

\b 一个词边界
(?! 负前瞻
- [1-4](?:\.\d+)?px 匹配数字 1-4 可选后跟 . 和 1+ 数字和 px
) 关闭前瞻
(?<!(?<!\S)\.) 否定前瞻，断言左侧不是 .，左侧有空白边界以防止部分匹配
(\d*)(\d) 捕获第 1 组，匹配可选数字，并捕获第 2 组中的单个数字
(?:\.(\d+))? 可选匹配 . 并在第 3 组 1+ 数字中捕获
px\b 匹配 px 后跟单词边界

Regex demo

使用 VSCode 搜索和替换将 px 替换为 rem

1 个答案: