Why does regex not match when there are more then one #?

Question

I just came across the following function below:

function hexToRgb(hex){
  // By Tim Down - http://stackoverflow.com/a/5624139/3493650
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
     return r + r + g + g + b + b;
  });

Now I tried the following regex in my browser console:

s = "#ddd"
s.match(/^#?([a-f\d])([a-f\d])([a-f\d])$/i) // RESULT ["#ddd", "d", "d", "d"]

Now when I change s to the following:

s = "##ddd"
s.match(/^#?([a-f\d])([a-f\d])([a-f\d])$/i) // null

Why is it null? Why no match, when I check the regex in the regex checker here:

It says the following:

#? matches the character # literally Quantifier: ? Between zero and one time, as many times as possible, giving back as needed [greedy]

Now the above statement says as many times as possible , so why does ##fff not match with the regex /^#?([a-f\d])([a-f\d])([a-f\d])$/i ?

@nisar `##ddd` is example for regex, not actual color code and no, there is no such color as `##ddd` as it's invalid hex code — Justinas, Apr 18 '16 at 06:08

timolawl · Answer 1 · 2016-04-18T06:40:28.603

3

You needed the +:

^#+?([a-f\d])([a-f\d])([a-f\d])$

The + matches 1 or more of the preceding token.

The ? makes the preceding quantifier lazy, causing it to match as few characters as possible.

Edit:

It can actually be simplified to ^#+([a-f\d])([a-f\d])([a-f\d])$ since as @TimPietzcker mentioned, the following tokens can't match #.

edited Apr 18 '16 at 06:40

answered Apr 18 '16 at 06:03

timolawl

5,434
13
29

1

Actually, laziness or greediness is irrelevant here since the following tokens can't match a `#` anyway. – Tim Pietzcker Apr 18 '16 at 06:09

score 2 · Accepted Answer · answered Apr 18 '16 at 06:06

The explanation given by Regex101 can be misunderstood. I would rewrite it as

"Between zero and one time, preferably one, but also allowing zero if necessary (greedy)"

In general, greedy matching means "try to match as many as possible", but in this case the maximum allowed number is 1.

^#?([a-f\d])

means

Start the match at the beginning of the string.
Match one (optional) #.
Then match a hex digit.

This obviously fails with ##1 (and this isn't affected by laziness or greediness in this case).

score 0 · Answer 3 · answered Apr 18 '16 at 06:08

0

You need a '+' after your hash.

With '+' The preceding item will be matched one or more times.

You regex will be ^#+?([a-f\d])([a-f\d])([a-f\d])$

answered Apr 18 '16 at 06:08

Shubham Khatri

270,417
55
406
400

Why does regex not match when there are more then one #?

3 Answers3