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を置換に挿入する必要がなくなります。

もう1つの問題は、正規表現が一致していることです。これは、1桁以上に一致するように置き換えた\d*?deg文字列の前に0桁以上あります。deg\d*?\d+

于 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 に答える