Writing a Regex to Validate an Input String for Setting It as Padding on an Element in JS

Hello developers! In this blog post, we will going to write a Regular Expression to validate an input string to set this string as padding of an Element in JavaScript.

Before starting, If you are not familiar with Regex or Regular Expressions in JavaScript, then read the blog post What are Regex or Regular Expressions in JavaScript and their Usages to learn and understand about Regex.

We need to write this type of Regex to validate user input for padding, margin, or any other strings, when we are working on projects where elements styled by the user, for example, Template Editors, Content Management Systems (CMS), Blog and Article Editors, Website Builders, Email Template Editors.

When I searched Google for it, then it shows results of Regex Padding and even ChatGPT did not write correct regex, but yes, ChatGPT helped me to write this regex, and I wrote it but it is too long then I sort it by ChatGPT in three prompts, Then I feel ChatGPT is not a smart Guy but yes it is informative Guy.

I want to mention one more thing, and that is, if we only want to set padding on an element and not storing it before setting then we don't need to validate the input string because Dom automatically validates it and if it is valid then set it otherwise it is ignored.

So, Below is the regex that I wrote after spending some time on testing and interacting with ChatGPT that match string of all valid padding-string types.

/^\s*(\d+(\.\d+)?px|0)?(\s+(\d+(\.\d+)?px|0))?(\s+(\d+(\.\d+)?px|0))?(\s+(\d+(\.\d+)?px|0))?\s*$/

Let's break down this regex to understand in the following points:

/^.....$/ : Here, / at the start and end used to define or it is the syntax of regex declaration, ^ Asserts the start of the string and & Asserts the end of the string.

In \s*(\d+(\.\d+)?px|0)? : \s* matches zero or more spaces at the start of the string, after this ( and at the end )? define the capturing group and ? makes this group optional, and you see in regex all the rest of capturing groups are also optional so that it matches empty padding-string or only with spaces.

In \s*(\d+(\.\d+)?px|0)? : \d+ matches one or more digits, (\.\d+)? matches any decimal point and one or more digits after the decimal point, and ? makes this optional to match non-decimal numbers. px matches to px just after the number, | defines an OR condition, it means \d+(.\d+)?px OR zero (0).

Overall, this capturing group matches any positive number with px and only zero is the number that matches with or without px. For example, 0 and 0px matched but not 1 to 9 without px.

After the first capturing group, the second, third, and fourth capturing groups are the same, and it is (\s+(\d+(\.\d+)?px|0))?. It is very similar to the first group, just a small difference is that it starts with \d+ and this little change ensures that at least one space is must have between capturing groups.

For example, it ensures and matches with a string like "10px 8px", not with "10px8px". In the string "      5px    6px    8px     9px     ", spaces at the start matched with stars \s* of regex, last spaces matched with ends \s* of regex, and "5px", "    6px", "    8px" and "     9px" matched with the first, second, third, and fourth capturing groups.

The following are the incorrect regex that ChatGPT gives when I tell it shortens the above regex:

• /^\s*((\d+(\.\d+)?px|0)\s*){0,4}\s*$/ : It is incorrect because it also matches with strings like "10px8px". And this it happened because \s* in the capturing group allows 0 or more spaces.
• /^\s*((\d+(\.\d+)?px|0)\s+){0,4}\s*$/ : Maybe you think, now this is correct like me but it is also incorrect because it forces to must be at least one space at the end. For example, it matches with "10px 8px " not with "10px 8px", but all we know that both strings are correct padding-strings.

Now below is the corrected regex given by ChatGPT by shortening (small) it in the third prompt:

/^\s*((\d+(\.\d+)?px|0)(\s+|$)){0,4}\s*$/

If you know and use Regex in life before then definitely understand (\d+(\.\d+)?px|0) and {0,4} parts of this regex like I understand it but can't understand (\s+|$) in regex, and below is the explanation when I ask for it to ChatGPT:

(\s+|$) : This is a capturing group that includes two alternatives separated by | (OR):

• \s+ : Matches one or more whitespace characters (spaces).
• $ :  Asserts the end of the string.

So, (\s+|$) allows for either one or more spaces or the end of the string to follow each group.

In the context of the larger regex ^\s*((\d+(\.\d+)?px|0)(\s+|$)){0,4}\s*$ :

• (\d+(\.\d+)?px|0) : This part matches a positive number (possibly with decimals) followed by "px" or the digit 0.
• (\s+|$) : This part ensures that each group is followed by either one or more spaces or the end of the string.

Putting it together, (\s+|$) helps ensure that groups are separated by at least one space or appear at the end of the string. This adjustment should now align with your requirements.

So this is what I learned during writing this regex, and I hope you also understand it and learn something by reading this post and feel this post helpful. Happy Coding!