Javascript参数化字符串：替换（RegExp，函数）意外分组/匹配

正则表达式常常让我摸不着头脑。我正在努力理解分组的意外结果，希望有人告诉我：

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

背景： 我正在处理包含十六进制颜色代码的字符串。我在该字符串上使用

replace（）

，将匹配的颜色代码“馈送”到返回HTML的函数中——类似于参数化字符串。其中一个参数正常，但另一个参数与整个字符串匹配

一些代码： 举一个简单的例子（注意：不要像十六进制代码那样接受字母）

小提琴的代码：

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>

$(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);
  });

});

请输入两个十六进制颜色代码（仅限数字）

滚
德科洛兹

源

JS:

<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>

$(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);
  });

});

$（文档）.ready（函数（）{
函数参数化HTML（p1、p2）{
返回“”；
}    
$（'#booyah'）。单击（函数（）{
var colorsString=$（'#colorsInput'）.val（）；
var html=colorsString.replace（/（\d{6}）。*（\d{6}）/，参数化html）；
$（'#html'）.text（html）；
$（'#colors'）.html（html）；
});
});

输出：

---

注意第一个

background color

属性。

给回调函数的第一个参数

replace

是整体匹配。之后是任何捕获组的附加参数。因此，如果将函数签名更改为：

function parameterizedHtml(match, p1, p2)

…它将按预期开始工作

---

随着变化。我还将正则表达式更改为

/（[a-f0-9]{6}）。*（[a-f0-9]{6}）/I

，因此它接受十六进制，但请注意，数字颜色值不需要是六位数。它们也可以是

#abc

与

#aabbcc

相同。如果您想同时接受这两个参数，那么：

/（[a-f0-9]{3}}{124;[a-f0-9]{6}）。*（[a-f0-9]{3}{124;[a-f0-9]{6}）/i

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

^（[0-9a-fA-F]{6}）[^0-9a-fA-F]*（[0-9a-fA-F]{6}）

---

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

用于

replace

的颜色不正确。它期望第一个参数是整个匹配，而不是对应于第二个参数的第一个子匹配。谢谢您的输入。然而，正如我在问题中所说的，这只是一个简单的例子来展示“意外的匹配”，我没有为正确的十六进制匹配而烦恼，这不是我错误的根源。（见上面T.J.的回答）很公平：）。你让我上了regex，我错过了剩下的：（太好了！我本应该好好读一下手册，我不敢相信我错过了那本。-谢谢你更新了regex，我已经想到了

[a-f]

部分，但没有想到3个字符的颜色代码，这会派上用场。额外问题：你会说匹配

[a-fA-F0-9]

或强制转换为小写，匹配

[a-f0-9]

更好？@SilverQuettier:在上面，我在正则表达式上使用了

I

标志，这是不区分大小写的匹配。因此不需要做任何事情来使字符串小写。我认为无论是使用

I

标志还是使用

[a-fA-f0-9]

：-）