javascript - 少/javascript : convert regexp object to integer (calculation)

Question

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

重要的部分是.replace(/(\d*)?deg/g, 90 - '$1' + 'deg')，我尝试了不同的函数，但无论如何，输出总是以 NaN 结尾:- parseInt('$1')- parseFloat('$1')- 评估(90 - '1 美元')- 数字('$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);
}

Answer 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);"