What you'll be able to do

By the end of this page you should be able to write a few small RegExp patterns for form fields, use .test(), do a simple .replace(), and know when a plain string method is enough.

Previous post: dates you will actually use.

Who this is for

  • People validating "digits only" or "looks like an email" on a client form
  • Beginners scared of /^...$/ walls in Stack Overflow answers
  • Anyone who used includes("@") and wants one step more precise

You can skip this if you already maintain form schemas with a library. This is the language primitive underneath.

What a RegExp is (plain words)

A regular expression is a pattern for text. You ask: does this string match the pattern?

const onlyDigits = /^\d+$/;
console.log(onlyDigits.test("12345")); // true
console.log(onlyDigits.test("12a")); // false

Scenario A — zip / PIN field. Reject letters early in the UI.

Scenario B — search highlight. Different job: find pieces inside a longer string — still RegExp, but forms mostly need "whole value ok?"

^ means start, $ means end, \d means digit, + means one or more.

Email-shaped (honest limits)

const emailish = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

Scenario A — catch obvious typos like missing @ before submit.

Scenario B — real email validity. Only a confirmation email proves an address works. Client regex is a first filter, not a legal definition of email.

test vs replace

const phone = "(555) 010-2000";
const digits = phone.replace(/\D/g, "");
console.log(digits); // 5550102000

Scenario A — strip formatting before sending to an API.

Scenario B — validate after strip with /^\d{10}$/ if your product expects ten digits.

Flags you will see

  • i — ignore case
  • g — replace/find all matches

Scenario A — /hello/i.test("Hello") .

Scenario B — forgetting g in replace and only cleaning the first match.

A tiny practice file

<!DOCTYPE html>
<html>
  <body>
    <label>Code <input id="code" placeholder="digits only" /></label>
    <button id="check">Check</button>
    <p id="out"></p>
    <script>
      const onlyDigits = /^\d+$/;
      document.getElementById("check").addEventListener("click", function () {
        const v = document.getElementById("code").value.trim();
        document.getElementById("out").textContent = onlyDigits.test(v)
          ? "OK"
          : "Digits only, please";
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. Copying a 200-character "perfect email" regex nobody can maintain.

2. Validating only on the client and trusting it on the server — front-end checks help UX; servers must still validate.

3. Using RegExp where trim(), includes, or length would do.

4. Building HTML from regex replace with user text without escaping — security comes later in this phase path; stay careful.

What to try before the next post

  1. Digits-only check for a PIN.
  2. Strip non-digits from a phone-like string.
  3. Write one emailish test and list two fake addresses it wrongly accepts (honesty check).

Next in this series: debounce from zero — wait until typing pauses before running expensive work.

Try this next outside the series

Deeper JavaScript pays off when you connect it to routes, imports, and performance-sensitive app code.

javascripttutorialsdevelopers