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\((.*)\);/正则表达式匹配，然后抓取第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。

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

1 个答案: