What are quantifiers? (the `+` and `{14,16}`)

In this exercise, we set pattern attribute it to: "[a-zA-Z0-9]+" so that only numbers and alphabets are valid in the input. What does ‘+’ in ‘[a-zA-Z0-9]+’ do?

23 Likes

+ Matches the preceding expression 1 or more times. Equivalent to {1,} .

For example, /a+/ matches the ‘a’ in “candy” and all the a’s in “caaaaaaandy”, but nothing in “cndy”.

13 Likes

@discobot
Can some one explain what does “[0-9]{14,16}” and [a-zA-Z0-9]+ mean

The square brackets denote a class which is akin to a set of all digits 0 thru 9 inclusive. The curly braces denote a character count, above that would be minimum 14, maximum 16.

Again, this is a class that contains all the lowercase letters a thru z, all the uppercase letters A thru Z and all the digits 0 thru 9. The plus sign means one or more times.

19 Likes

one more query. what would be validation pattern if we to include a special character to be used condition

1 Like

Can you give an example? By ‘special character’ are you referring to escapes or something like the @ character?

2 Likes

Hey mtf, just to be sure I understand before I move on… so the + allows you to use the same character more than one time? So if I didn’t have the"+", does that mean it would expect the input field to be composed of all different characters? What happens if you leave the “+” off? I think I’m feeling insecure about this because the example for the number input -[0-9]{14,16}- field did not have a “+” behind it

1 Like

@mtf can correct me if I’m wrong, but here’s my understanding:

It means you can repeat the preceding character (or more usually, class of characters defined within square brackets) once, or more than once i.e. [a-zA-Z0-9]+ means that you can have any combination of letters (both lower case and capitals) and numbers any number of times (except zero - you can’t leave the field blank). Notice that this means you could enter the same letter/number as many times as you want, either by only using this one character, or in any combination with any other characters that are allowed within our defined class.

e.g. The following would be allowed:

111111111111111
AaAaAaAaAaA
A
1a2a3B4B5B6B5B4B3Z21

The regex [0-9]{14,16} means that we can repeat any combination of numbers (the class defined within the square brackets) a minimum of 14 times and a maximum of 16 times (i.e. 14, 15 or 16 times). There isn’t a + because we have defined a more specific character input number within the curly brackets.

To clarify, here are some examples using the same defined class of characters [a-zA-Z0-9]

[a-zA-Z0-9]{5,15}
means any combination of letters or numbers with a length of between 5 and 15 characters (no more, no less).

[a-zA-Z0-9]+
means any combination of letters or numbers of unlimited length, but you can’t leave the field blank (i.e. 1 or more)

[a-zA-Z0-9]*
using * means the same as using + and in addition you could leave the field blank
(i.e. you have to use the defined character class 0 or more times)

I’m not sure what would happen if you didn’t include anything after the class definition e.g. just [a-zA-Z0-9]. Why don’t you try it out and see what happens? I’m finding that I’m learning a lot by testing code using trial and error. I’ll try it out too and get back to you with my discovery. If neither of us can work it out, then maybe @mtf can clarify :wink:

11 Likes

@annageminn @mtf

I’ve had a play with this and it seems to default to an input constraint of 1 character, equivalent to {1,1} i.e. it allows an input of any single lower or upper case letter, or any single number, but It doesn’t allow leaving the field blank, or an input of 2 or more characters.

4 Likes

I also played around with it, and have discovered that we can eliminate the minlength and maxlength attributes in the input element (in the exercise), in exchange for {3,15} at the end of the pattern attribute.

So:

<input id="username" name="username" type="text" required minlength="3" maxlength="15" pattern="[a-zA-Z0-9]+">

…will give the same result as:

<input id="username" name="username" type="text" required pattern="[a-zA-Z0-9]{3,15}">
8 Likes

Thank you Roy :slight_smile:

2 Likes

I still dont understand what the + does in that example…

It is a quantifier — Matches between one and unlimited times, as many times as possible, giving back as needed (greedy)

[A-Za-z0-9]+

‘no pots on the stove’

[ 
  [
    {
      "content": "no", 
      "isParticipating": true,
      "groupNum": 0,
      "groupName": null,
      "startPos": 1,
      "endPos": 3
    } 
  ], 
  [
    {
      "content": "pots",
      "isParticipating": true,
      "groupNum": 0,
      "groupName": null,
      "startPos": 4,
      "endPos": 8
    } 
  ], 
  [
    {
      "content": "on",
      "isParticipating": true,
      "groupNum": 0,
      "groupName": null,
      "startPos": 9,
      "endPos": 11
    } 
  ], 
  [
    {
      "content": "the",
      "isParticipating": true,
      "groupNum": 0, "groupName": null,
      "startPos": 12,
      "endPos": 15
    } 
  ], 
  [
    {
      "content": "stove",
      "isParticipating": true,
      "groupNum": 0,
      "groupName": null,
      "startPos": 16,
      "endPos": 21
    } 
  ] 
]

https://regex101.com/

1 Like

Did you see this explanation?

https://discuss.codecademy.com/t/faq-learn-html-form-validation-matching-a-pattern/389551/17?u=jon_morris

One thing to add, using [a-zA-Z0-9]+ won’t accept any spaces in your input i.e.
5dX 4r8 8F is NOT allowed
5dX 4r88F is NOT allowed
5dX4r88F IS allowed

@mtf not sure if that’s contradicting your ‘no pots on the stove’ example - I didn’t really understand the code in your explanation…

UPDATE: I’ve just checked the regex on the app @mtf linked to, and here whitespace IS accepted; however, it seems that the app is ignoring the spaces and treating each group of characters on either side as separate string inputs to be verified… Does this have something to do with the regex options that have been set by default (i.e. global etc.)?
What I do know is that when using this particular regex in this lesson’s task (i.e. in HTML, as the value of an <input> tag’s required pattern attribute), the input field does not accept the space character.

That example didn’t really have a lot of meaning other than that every word was accepted by the pattern.

If we wish to include whitespace then we need to clarify what whitespace is allowed. \s will allow all white space, meaning space characters AND anything else that qualifies as whitespace such as newlines or line breaks.

Should we only wish to allow the space character, then add that character to your class. That might mean having to change the quantifier to * so that if no space characters are present it will still match.

The purpose of including the link to the tester is so that we can play around with the pattern and see the changes in the outcome. We can spend hours and hours playing around with this and still walk away none the wiser unless we are dilligent at saving our notes and examples/outcomes. There really is no easy way to learn regex except lots and lots of practice and experimenting.

Bottom line, test all your patterns before accepting them as correct or accurate.

2 Likes

Is adding a space character as simple as adding a space to [a-zA-Z0-9]+ ?
e.g. at the beginning as in [ a-zA-Z0-9]+ ?

If [a-zA-Z0-9]+ must have at least 1 character from the class, but doesn’t have to have all of them, then doesn’t that mean adding the space to our class just means we can use it as our 1 or more characters if we want to? i.e. we don’t need to replace + with * ?

Having said that though it all comes back to what you say…

2 Likes

One should think so, yes. What was the outcome?

What happens if the test string has no space characters and you use the one or more quantifier?


Aside

By this point I think you have JS down enough to work with the test and match tools that are built in. This will give you a parallel perspective of what the HTML pattern matcher is doing. Both APIs are using the same regex engine.

1 Like

For now, I’ve tested these in the HTML code for this lesson’s task i.e. in the form’s input field:

Yes it is - that works.
These are now allowed:
5dX 4r8 8F
5dX 4r88F

We don’t need to replace + with *
5dX4r88F is still allowed.

Then we’re two flags twisting in the wind until we have definitive examples of both + and * quantifiers. How can we differentiate between these two? Can you find an example or two through search? Please share.

1 Like

Surely, the only difference will be that:

  • + requires at least 1 character. In our [ a-zA-Z0-9]+ example. that could be, for example, either:
    a
    A
    9
    or one space character

  • * would do exactly what + does, but would also allow the input field to be left blank

So, I think whether you use one or the other depends on whether you want to allow no input or not. As this lesson is about validating inputs such as usernames or passwords, I think this matter isn’t really relevant, as we are much more likely to want to use a maximum/minimum quantifier:
e.g [ a-zA-Z0-9]{8, 16}
This would be a more realistic example, as it would allow a username of two words, without the need for an underscore (actually not allowing an underscore in this particular example).

4 Likes