0

正規表現はよくわかりません。グループ化による予期しない結果を理解するのに苦労しています。誰かに教えてもらいたいです:

  • 意図したとおりに機能しない理由
  • 期待される結果を達成する方法

環境：

私は16進カラーコードを含む文字列を扱っています。その文字列を使用replace()して、一致したカラー コードを HTML を返す関数 (パラメーター化された文字列のようなもの) に "フィード" します。パラメータの 1 つは問題ありませんが、もう 1 つは文字列全体に一致しますか?

いくつかのコード:

簡単な例の JSFiddleを次に示します (注意: 16 進コードまでは文字を使用しません)。

フィドルのコード:

HTML:

<p>Please enter two hex color codes (digits only)</p>
<input id="colorsInput" type="text"></input>
<button id="booyah">Roll</button>
<p>Teh colorz</p>
<div id="colors"></div>
<p>Teh source</p>
<div id="html"></div>

JS:

$(document).ready(function() {

  function parameterizedHtml(p1, p2) {
    return '<div style="background-color:#' + p1 + '; width:50px; height:50px;">&nbsp;</div><div style="background-color:#' + p2 + '; width:50px; height:50px;">&nbsp;</div>'; 
  }    

  $('#booyah').click(function() {
    var colorsString = $('#colorsInput').val();
    var html = colorsString.replace(/(\d{6}).*(\d{6})/, parameterizedHtml);
    $('#html').text(html);
    $('#colors').html(html);
  });

});

出力：

<div style="background-color:#548423 564212; width:50px; height:50px;">&nbsp;</div><div style="background-color:#548423; width:50px; height:50px;">&nbsp;</div>

background-color最初の属性に注意してください。

4

2 に答える 2

1

replaceコールバック関数に与える最初の引数は、全体的な一致です。その後、任意のキャプチャ グループの追加の引数が続きます。したがって、関数の署名を次のように変更すると:

function parameterizedHtml(match, p1, p2)

...期待どおりに動作し始めます。

これは、変更に伴う更新されたフィドルです。また、16 進数を受け入れるように正規表現を変更しました/([a-f0-9]{6}).*([a-f0-9]{6})/iが、色の数値は 6 桁である必要はないことに注意してください。3 桁の長さの場合もあります。#abcと同じ#aabbccです。両方を受け入れる場合は、次のようにします/([a-f0-9]{3}|[a-f0-9]{6}).*([a-f0-9]{3}|[a-f0-9]{6})/i。

于 2014-08-04T08:45:42.820 に答える
0

したがって、正規表現は16進数ではなく数字を探しています。1 つの入力で 2 つのカラー コードを探していると仮定すると、

^([0-9a-fA-F]{6})[^0-9a-fA-F]*([0-9a-fA-F]{6})

これにより、6 つの 16 進文字で開始し、任意の量の非 16 進文字 (なしを含む)、さらに 6 つの 16 進文字が続きます。これには、大文字と小文字の 16 進数のアルファも含まれます。そして、括弧は最初の色と 2 番目の色を別々にキャプチャします。

于 2014-08-04T08:45:52.297 に答える