JavaScript参数化字符串：replace（RegExp，function）意外分组/匹配

Question

正则表达式经常使我难以理解。 我正在努力了解分组的意外结果，并希望有人告诉我：

• 为什么它没有按预期工作
• 我怎样才能达到预期的结果

语境：

我正在使用包含十六进制颜色代码的字符串。 我在该字符串上使用replace()将匹配的颜色代码“馈送”到返回HTML的函数中-一种参数化的字符串。 其中一个参数可以，但另一个参数可以匹配整个字符串？

一些代码：

这是一个带有简单示例的JSFiddle （请注意：就十六进制代码而言，它不接受字母）。

小提琴的代码：

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属性。

Answer 1

赋予回调函数的第一个参数replace是整体匹配。 然后是任何捕获组的附加参数。 因此，如果将函数签名更改为：

function parameterizedHtml(match, p1, p2)

...它将按预期开始工作。

这是有关更改的最新动态 。 我还将正则表达式更改为/([a-f0-9]{6}).*([a-f0-9]{6})/i因此它接受十六进制，但请注意，数字颜色值不是必须为六位数。 它们也可以是三位数 。 #abc与#aabbcc相同。 如果您要接受两者，则：/([ /([a-f0-9]{3}|[a-f0-9]{6}).*([a-f0-9]{3}|[a-f0-9]{6})/i 。

Answer 2

因此，您的正则表达式在寻找数字，而不是十六进制。 假设您要在一个输入中查找两个颜色代码，我会选择

^（[0-9A-FA-F] {6}）^ 0-9A-FA-F] *（[0-9A-FA-F] {6}）

这样，您就可以从6个十六进制字符开始，然后是任意数量的非十六进制字符（包括无），然后是另外6个十六进制字符。 这也说明了大写和小写的十六进制字母。 然后括号将分别捕获第一种颜色和第二种颜色。