Does HTML regex follow the same rules as Javascript?

I’ve had a look at MDN’s Regular Expressions page (suggested in this exercise if we want to find out more). I notice that the information here is based on regex in JavaScript. Can all of the same special characters and their different combinations (as shown in the examples on this page) be used in HTML5 (as the pattern attribute’s "value") with the same meanings that they have in JavaScript? This post What is a regular expression? that I found says:

Below, is a link to a page on HTML.com with some explanations and examples of regular expressions that can be used with the pattern attribute, which I found easier to understand. It also explains really well why regular expressions should be used with caution, otherwise they can cause more problems than they solve.
https://html.com/attributes/input-pattern/
Could someone explain what the d. (lowercase d followed by a full stop) means in the second example for Username Patterns on this page? :thinking:

No. We need a script environment to access the regex engine.

1 Like

So, if we’re just using HTML5 (without a JavaScript environment), would it be best just to stick to the examples on https://html.com/attributes/input-pattern/, or a regex list specific to HTML5, rather than refer to MDN’s Regular Expressions for JavaScript page?

There definitely seems to be some overlap though…?

D’oh!

pattern="[A-Za-z0-9]+"

Says it all.

allows you to add basic data validation without resorting to JavaScript.

Time for a refresher…

1 Like

Are the regular expressions that will work with HTML’s pattern attribute just a reduced selection from those available in JavaScript? Or can we literally just lift any of JavaScript’s regex and insert them into pattern="value"?

1 Like

The engine is outside of the ECMAScript domain. It goes way back in time and has been rigid enough to make every other API come to it.

1 Like

The answer to the original question is yes, according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#pattern

’ It must be a valid JavaScript regular expression, as used by the RegExp type’

1 Like

It means \d\. - a digit or a period. The backslashes aren’t displaying and to make matters worse the page refers to them as slashes. e.g. it says ‘Not the slash character’ instead of ‘Not the backslash character’. I recommend avoiding html.com and w3schools and using MDN instead.

1 Like

That’s really helpful, thanks! I can see now that without the backslash in front of the d it doesn’t make sense and is confusing.

Interestingly, though, I’ve discovered that the period (full stop) doesn’t need a backslash in front of it in order for it to be interpreted literally: I would have thought it was a special character (like * and + etc.), but maybe not…?
So, both [A-Za-z\d.]+ and [A-Za-z\d\.]+ allow a period to be included anywhere in the input, and any number of times. This also works with other special characters (i.e. without the backslash). Do you think it’s got something to do with the square backets? Any thoughts? :thinking:


Just to clarify for anyone else reading this:

\d means any digit:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-digit

So, for example, [A-Za-z\d]+ is equivalent to [A-Za-z0-9]+
Without the preceding backslash, d just refers to lower case ‘d’. The backslash indicates that the following d is a special character that means any digit:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-backslash

@text5695674026 Could you confirm you agree with this summary?

Hi Jon, yes that’s much clearer than what I wrote and you’re right, the period isn’t a special character when it’s inside the square brackets so it doesn’t need a backslash there, for further details open this page and search for [xyz]

1 Like

Great, thanks for confirming that, and for finding the detail in the documentation - I hadn’t spotted that! But, hey, between us we got there! :+1:

1 Like