{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blog/regex-the-minimum-you-need-to-know/","result":{"data":{"site":{"siteMetadata":{"name":"Huzaifa Rasheed","title":"Huzaifa Rasheed","description":"Software Engineer","about":"\n      Hey, I'm Huzaifa.\n      <br/><br/>\n      Engineer by trade, builder by instinct - I believe in owning my stack, shipping fast, and occasionally running on chai (tea) and stubbornness. I work best in that sweet spot between deep focus and fast feedback - solo or in sync with a good team.\n      <br/><br/>\n      This site's my little corner of the internet - part portfolio, part lab - where I document what I build, break, or learn.\n      <br/><br/>\n      Outside work, I'm into long walks, pixel-perfect headshots in FPS games (eventually... maybe), plants I probably overwater, and the occasional \"classified\" hobby to stay curious.\n      <br/><br/>\n      Reach out anytime - my digital door's always open. 👋\n    ","twitter":"https://twitter.com/huzRasheed","github":"https://github.com/huzaifa-99","linkedin":"https://www.linkedin.com/in/huzaifa-rasheed/","devto":"https://dev.to/huzaifa99","stackoverflow":"https://stackoverflow.com/users/12579290/huzaifa","leetcode":"https://leetcode.com/rhuzaifa","discord":"https://discordapp.com/users/rhuzaifa","email":"dev@rhuzaifa.com","projects":[{"name":"FFMpeg Web","description":"An experimental browser-based terminal that runs FFmpeg using WebAssembly, enabling media processing directly in the browser.","link":"https://ffmpeg-web.rhuzaifa.com/","github":"https://github.com/huzaifa-99/ffmpeg-web"},{"name":"Feed base 2","description":"A mini browser game where players manipulate 4-bit binary blocks to match target BCD values - part puzzle, part binary logic trainer.","link":"https://feedbase2.rhuzaifa.com/","github":"https://github.com/huzaifa-99/feed-base-2"},{"name":"Fabric browser extension","description":"A Chrome extension that injects engineered Fabric prompts directly into the ChatGPT interface for enhanced workflow automation.","link":"https://github.com/huzaifa-99/fabric-browser-extension","github":"https://github.com/huzaifa-99/fabric-browser-extension"},{"name":"Pure Cinema","description":"An experimental, tongue-in-cheek text-to-video generator that stitches together footage, synthesized voiceovers, and background music with a Node.js + ffmpeg pipeline. Not quite Hollywood, but it renders.","link":"https://cinema.rhuzaifa.com","github":null},{"name":"Aria2c Packload","description":"A Bash script for bulk downloading magnet links or torrents using aria2c - optimized for series or list-based transfers.","link":"https://github.com/huzaifa-99/aria2c-packload","github":"https://github.com/huzaifa-99/aria2c-packload"},{"name":"RSS Watchdog","description":"A lightweight Bash script that watches RSS/Atom feeds and compiles a Markdown-based reading checklist for Unix systems.","link":"https://github.com/huzaifa-99/rss-watchdog","github":"https://github.com/huzaifa-99/rss-watchdog"},{"name":"QuoteGen","description":"A quote graphic generator that produces stylized quote images with random selection and a built-in editor for customization.","link":"https://quotegen.rhuzaifa.com/","github":null},{"name":"WebRTC Video Chat","description":"A basic WebRTC-powered app enabling peer-to-peer video and audio calls between two users.","link":"https://webrtc-video-chat.rhuzaifa.com/","github":null}],"experience":null,"skills":[{"name":"Languages & Frameworks","description":"JavaScript, TypeScript, Python, Bash - Frameworks include Node.js, React, Next.js, Vue, React Native, FastAPI."},{"name":"Databases & Storage","description":"PostgreSQL, MySQL, MongoDB - Experience with schema design, indexing, query optimization, and migrations."},{"name":"Cloud & Infrastructure","description":"AWS (EC2, RDS, S3, Lambda), Vercel, Netlify, Heroku - Comfortable with serverless, autoscaling, and cost optimization."},{"name":"DevOps & Tooling","description":"Docker, Git, CI/CD pipelines (GitHub Actions, GitLab CI) - Experience with observability, containerization, and release workflows."},{"name":"Testing & QA Automation","description":"Jest, Playwright, Puppeteer, Selenium - Focus on E2E testing, mocking APIs, and maintaining test coverage."}]}},"markdownRemark":{"id":"2930c1e5-af80-55e8-80dd-bc7dd0a3c60f","excerpt":"Repost of https://dev.to/rhuzaifa/regex-the-minimum-you-need-to-know-496l You might have noticed when filling out an online form for email or password, you…","html":"<blockquote>\n<p>Repost of <a href=\"https://dev.to/rhuzaifa/regex-the-minimum-you-need-to-know-496l\">https://dev.to/rhuzaifa/regex-the-minimum-you-need-to-know-496l</a></p>\n</blockquote>\n<p>You might have noticed when filling out an online form for email or password, you sometimes get validation errors like <strong><em>email must be valid</em></strong> or <strong><em>password must be 8 digits long</em></strong>. Something like this 👇\t</p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cpv19e34kfiyios6xvh.PNG\" alt=\"Regex Use Example\"></p>\n<p>These are places where <strong>REGEX</strong> is used.</p>\n<h2>What Is Regex?</h2>\n<p>Regex is short for Regular Expressions. </p>\n<p>A sequence of characters that specifies a search pattern. These patterns are mostly used by string-searching algorithms to <strong><em>find</em></strong> or <strong><em>find and replace</em></strong> character/s. Thus they can be used for validations and mostly you will be using <strong><em>Regex</em></strong> for them.</p>\n<h2>How To Use Regex?</h2>\n<p>You can use different functions for matching regex with your data. In PHP there are functions starting with <code class=\"language-text\">preg_</code> that mostly match <strong>regex</strong> (see <strong><a href=\"https://www.php.net/manual/en/ref.pcre.php\">Regex for Php</a></strong>) while In JavaScript, regex are also objects. You can see some of the regex functions for JavaScript on <strong><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions\">Javascript Regex Guide</a></strong>.</p>\n<h2>Basic Validations</h2>\n<p>There are a number of online <strong>regex engines</strong> that you can use to quickly test out your regex expression. I mostly use <strong><a href=\"https://regex101.com/\">Regex101</a></strong> because I like it. The following examples are tested on Regex101.</p>\n<h5>Email</h5>\n<p><code class=\"language-text\">/^(([^&lt;>()[\\]\\\\.,;:\\s@\"]+(\\.[^&lt;>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/</code></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmxf8wqsn80ul9244k6k.PNG\" alt=\"Email Validation\"></p>\n<h5>Password</h5>\n<p>Minimum eight characters, at least one uppercase letter, one lowercase letter, and one number</p>\n<p><code class=\"language-text\">/^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)[a-zA-Z\\d]{8,}$/</code></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl9m9p3namsm2mt0fod2.PNG\" alt=\"Password Validation\"></p>\n<p>For more password validations, Check out the <strong><a href=\"https://stackoverflow.com/a/21456918/12579290\">answer on stackoverflow</a></strong></p>\n<h5>Numbers Only</h5>\n<p>To match 0 or many numbers\n<code class=\"language-text\">/^[0-9]*$/</code><br/></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvwwk8gfcskyh93db8sp.PNG\" alt=\"Numbers 0 or many\"><br/>\nTo match 1 or many numbers\n<code class=\"language-text\">/^[0-9]+$/</code><br/></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvcydj8giznhsdbyk33r.PNG\" alt=\"Numbers 1 or many\"><br/>\nTo match exactly 1 number\n<code class=\"language-text\">/^[0-9]$/</code><br/></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umhr6zjh4ape2r2zhjgd.PNG\" alt=\"Numbers exactly 1\"><br/>\nIf you add one more number in the test string, the validation will fail.</p>\n<h3>Phone Numbers Only</h3>\n<p>This is a little difficult to explain as different countries have different phone numbers, codes, etc., you know what I am talking about.</p>\n<p>For my number, and I have an 11 digit number(Pakistani Phone Number), I use the following <strong>regex</strong>\n<code class=\"language-text\">/^((\\+92)|(0092))-{0,1}\\d{3}-{0,1}\\d{7}$|^\\d{11}$|^\\d{4}-\\d{7}$/</code><br/></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23ual8brwv9o6sjhdeh7.PNG\" alt=\"Phone Number validation country code\"><br/>\nIt validates the phone number with and without the country code like the following do pass</p>\n<ul>\n<li>00923000000000</li>\n<li>+923000000000</li>\n<li>03000000000</li>\n</ul>\n<p>I would suggest that for a good reference, check out <strong><a href=\"https://github.com/google/libphonenumber\">Google’s Library</a></strong> for validating international phone numbers. This is not regex but it gets the job done if are on the run.</p>\n<h4>Characters Only</h4>\n<p>To match for 1 or many characters\n<code class=\"language-text\">/^[A-Za-z]+$/</code></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5sn7qtel8j4ewiyx0yt.PNG\" alt=\"Characters only 1 or many\"></p>\n<ul>\n<li>To match 0 or many characters you can use <code class=\"language-text\">/^[A-Za-z]*$/</code></li>\n<li>To match exactly 1 character you can use <code class=\"language-text\">/^[A-Za-z]$/</code></li>\n</ul>\n<p>Of course, there are other combinations you can explore.</p>\n<h4>URL Matching</h4>\n<p>The following will mostly match the URLs you want to<br/>\n<code class=\"language-text\">^(?:(?:https?|ftp):\\/\\/)(?:\\S+(?::\\S*)?@)?(?:(?!(?:10|127)(?:\\.\\d{1,3}){3})(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,}))\\.?)(?::\\d{2,5})?(?:[/?#]\\S*)?$</code></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap47bo7izyspogfky8mt.PNG\" alt=\"URL Matching exmaple\"></p>\n<p>This however does not match port numbers, Like it would not match <code class=\"language-text\">https://regex101:9000.com/?page=1</code>. So you should have a general idea of what type of URL you want to match. </p>\n<p>I suggest seeing <strong><a href=\"https://stackoverflow.com/questions/161738/what-is-the-best-regular-expression-to-check-if-a-string-is-a-valid-url\">Regex For URL</a></strong> that has different implementations of Php and Js that you can play with.</p>\n<h2>Which Language Supports Regex?</h2>\n<p>Almost every major language has support for regex. </p>\n<p>To be more clear, implementations of regex functionality are called a <strong><em>regex engine</em></strong>, and a number of libraries are available for reuse which different languages do use.</p>\n<p><strong>Regex</strong> syntax may vary slightly between languages but for the most part, it is the same.</p>\n<h2>Now Some Theory.</h2>\n<p>Fun is over guys, now we are moving towards the theory. Jokes aside, Most of you don’t need to know everything about regex in detail, the same with a programming language, we can’t learn everything about them. </p>\n<p>But you should know that 👇</p>\n<p><strong>A Regex can have</strong></p>\n<ul>\n<li>Tokens</li>\n<li>Anchors</li>\n<li>Meta Sequences</li>\n<li>Quantifiers</li>\n<li>Group Constructs</li>\n<li>Character Classes</li>\n<li>Flag/Modifiers</li>\n<li>Substitution</li>\n</ul>\n<p>If you want to learn and practice them at the same time then I would again suggest, goto <strong><a href=\"https://regex101.com/\">Regex101</a></strong>. It has a good reference for the <strong>regex</strong> operators. 👇</p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb6b7znp12zpuxriy0au.PNG\" alt=\"Regex101 regex reference\"> and I think I don’t need to explain more 😉</p>\n<h3>Fun Part While Writing The Article</h3>\n<p>I found a <strong>regex</strong> from StackOverflow that was matching non-ASCII characters and it matched every word I tried of any language. Even in my native language <strong><a href=\"https://en.wikipedia.org/wiki/Urdu\">Urdu</a></strong> it matched <code class=\"language-text\">اِسلامی جمہوریہ پاكِستان</code></p>\n<p><img src=\"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5cwcgmo0ldd3vwn1cebn.PNG\" alt=\"Regex that matches every word of every language\"></p>\n<p>I don’t know if it’s useful or not, but I will add it in the comments.</p>\n<h3>Tip</h3>\n<p>More like a best practice. You should do <strong>regex</strong> validations on both the frontend and backend of your code. Just in case someone tries to manipulate the frontend, your backend will not validate the invalid data.</p>\n<p><strong>Note:</strong> You can also use <strong><a href=\"https://www.w3schools.com/html/html_form_input_types.asp\">HTML5 Input Types</a></strong> for validating some form fields on the frontend, but for the backend you need <strong>regex.</strong></p>\n<hr>\n<h3>Conclusion</h3>\n<p>So did you use regex for a complex match sometime or you just got to know about it? Also, give a  💖 or a 🦄 if you like the article.</p>","frontmatter":{"title":"Regex? The Minimum You Need To Know.","date":"April 07, 2021","description":"Learn the basics of Regex (Regular Expressions) to validate and manipulate strings in your code efficiently with practical examples and use cases."}}},"pageContext":{"slug":"/blog/regex-the-minimum-you-need-to-know/","previous":{"fields":{"slug":"/blog/solid-is-it-still-useful-in-2021/"},"frontmatter":{"title":"Solid. Is It Still Useful In 2021?"}},"next":{"fields":{"slug":"/blog/how-to-abstract-socket.io-connections-in-your-spa/"},"frontmatter":{"title":"How to abstract Socket.IO connections in your SPA."}}}},"staticQueryHashes":["2276319502"]}