Question

我想转换供应商前缀渐变的背景位置，因此我根据此示例使用简单的公式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

如果您使用

会发生什么

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

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

我还将表达式转换为使用非捕获前向前瞻，这样就无需将重新插入deg重新插入到替换中。

另一个问题是你的正则表达式匹配\d*?deg，它在字符串deg之前是零或更多位数我已将\d*?替换为\d+以匹配1或更多数字。

Answer 2

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

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

LESS / javascript：将regexp对象转换为整数（计算）

2 个答案: