Question

正则表达式经常让我失望。我正在努力通过分组来理解意外结果，并希望有人告诉我：

为什么它没有按预期工作
如何达到预期效果

上下文

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

一些代码：

Here is a 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)

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

随着变化，

Here's an updated fiddle。我还将正则表达式更改为/([a-f0-9]{6}).*([a-f0-9]{6})/i，因此它接受十六进制，但请注意，数字颜色值不需要长度为六位数。它们也可以是three digits long。 #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个十六进制字符。这也解释了大写和小写的十六进制α。然后括号将分别捕获第一种颜色和第二种颜色。

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

上下文

一些代码：

输出：

2 个答案: