2

我想转换供应商前缀渐变的背景位置，因此我90 - (@degree)根据这个例子使用了一个简单的公式，它应该是90 - (135) = -45.

重要的是.replace(/(\d*)?deg/g, 90 - '$1' + 'deg')，我尝试了不同的函数，但无论如何，输出总是以 NaN 结尾： - parseInt('$1') - parseFloat('$1') - eval(90 - '$1') - Number(' $1')

如果我替换'$1'为'135'或任何其他数字，它会很好地工作。

  @w3c:     true;   // valid w3c syntax

  @webkit:  true;   // Google Chrome, Safari, iOS
  @moz:     true;   // Mozilla Firefox
  @ms:      true;   // Internet Explorer
  @o:       true;   // Opera

  @default-background-image: linear-gradient(135deg, blue, red), linear-gradient(150deg, green, orange);

.background-image (@arguments: @default-background-image;) {
  .result (...) when (@webkit = true) {
    background-image: ~`"@{arguments}"
      .replace(/[\[\]]/g,'')
      .replace("linear-gradient","-webkit-linear-gradient")
      .replace(/(\d*)?deg/g, 90 - '$1' + 'deg')`;
  }

  .result (...) when (@moz = true) {
    background-image: ~`"@{arguments}"
      .replace(/[\[\]]/g,'')
      .replace("linear-gradient","-moz-linear-gradient")
      .replace(/(\d*)?deg/g, 90 - '$1' + 'deg')`;
  }

  .result (...) when (@ms = true) {
    background-image: ~`"@{arguments}"
      .replace(/[\[\]]/g,'')
      .replace("linear-gradient","-ms-linear-gradient")
      .replace(/(\d*)?deg/g, 90 - '$1' + 'deg')`;
  }

  .result (...) when (@o = true) {
    background-image: ~`"@{arguments}"
      .replace(/[\[\]]/g,'')
      .replace("linear-gradient","-o-linear-gradient")
      .replace(/(\d*)?deg/g, 90 - '$1' + 'deg')`;
  }

  .result (...) when (@w3c = true) {
    background-image: @arguments;
  }

  .result (@arguments);
}
4

2 回答 2

1

如果你使用会发生什么

.replace(/(\d+)(?=deg)/g, 90 - parseInt($1))哪里$1没有引用？

似乎 java 脚本将引用的 $1 解释为“不是数字”的字符串

我还将表达式转换为使用非捕获前瞻，这将消除将重新插入插入deg替换的需要。

另一个问题是您的正则表达式匹配\d*?deg的字符串是零个或多个数字，而deg我已将字符串替换\d*?为\d+匹配 1 个或多个数字。

于 2013-06-17T02:44:22.977 回答
1

您需要一个替换函数而不是一个表达式（它被评估为一个字符串，导致问题）：

str.replace(/(\d*)deg/g, function($0, $1) {
    return (90 - parseInt($1)) + 'deg';
});

我已经删除了，?因为\d*已经满足了这一点。另外，我会使用\d+，因为空数字没有意义。

例子

var str = '@default-background-image: linear-gradient(135deg, blue, red), linear-gradient(150deg, green, orange);';

str.replace(/(\d*)deg/g, function($0, $1) {
    return (90 - parseInt($1)) + 'deg';
});

输出：

"@default-background-image: linear-gradient(-45deg, blue, red), linear-gradient(-60deg, green, orange);"
于 2013-06-17T02:47:46.620 回答