javascript - 正则表达式以像素为单位转换所有 rem-calc

Question

我必须将一些 sass 移植到 css 并且我有数千个 rem-calc 声明。

所以我需要例如 rem-calc(10 15 20 15); 为 10px 15px 20px 15px;

从 /rem-calc\([1-9]/ 开始，但不知道如何处理它。如果一些正则表达式专家可以提供帮助

测试用例示例:

  padding: rem-calc(10 15 20 15);
  width: rem-calc(415);

应该变成:

padding: 10px 15px 20px 15px;
width: 415px;

谢谢!

Answer 1

只是一个粗略的想法:如果你将这些 rem-calc 字符串与 /rem-calc\((.*)\);/ 正则表达式匹配，然后抓取 Group 1 个值以空格分隔并添加 px，然后它看起来像

var re = /rem-calc\((.*)\);/g;
var str = 'rem-calc(10 15 20 15);';
var m = str.match(re);
if (m) {
  console.log(m[1].split(/\s*(\d+)\s*/).filter(Boolean).join("px ") + "px");
}

/\s*(\d+)\s*/ 用空格括起来的数字拆分，然后 .filter(Boolean) 删除空值和 join("px ") 在数字后添加 px。然后，我们需要在末尾追加 px。