0

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

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

语境：

我正在使用包含十六进制颜色代码的字符串。我使用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属性。

4

2 回答 2

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。

于 2014-08-04T08:45:42.820 回答
0

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

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

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

于 2014-08-04T08:45:52.297 回答