DEV Community

AskATool.com
AskATool.com

Posted on

JSON, Regex, Base64 and JWT Without Installing Anything

#webdev #javascript #beginners #productivity

Every week I run into the same four small jobs:

  • a JSON blob that won't parse
  • a regex that matches too much (or nothing)
  • a Base64 string I need to read
  • a JWT from a bug report that I want to look inside

None of them deserves a new npm package or an IDE plugin. Here's how to handle each one quickly, in code or the terminal, plus a browser tool for when you just want the answer.

1. JSON: format it, then find the error

Minified JSON from an API response is unreadable. In JavaScript, pretty-printing is one line:

const pretty = JSON.stringify(JSON.parse(raw), null, 2);
Enter fullscreen mode Exit fullscreen mode

From the terminal, Python is usually already installed:

echo '{"name":"Ada","langs":["js","py"]}' | python3 -m json.tool
Enter fullscreen mode Exit fullscreen mode

When JSON.parse throws, it's almost always one of these:

Error Example Fix
Trailing comma {"a": 1,} Remove the last comma
Single quotes {'a': 1} JSON only allows double quotes
Unquoted keys {a: 1} Quote every key
Comments // note JSON has no comments; remove them

Browser option: paste it into a JSON Formatter to format it and check that it's valid. Comparing two API responses? A JSON Diff Checker compares them for you.

2. Regex: test against real text before you ship it

The classic mistake is writing a pattern against one example and finding out in production that it matches something else. Always test against a few real lines, including ones that shouldn't match.

const text = `Contact: ada@example.com
Old: ada(at)example.com
Support: help@askatool.com`;

const emails = text.match(/[\w.+-]+@[\w-]+\.[\w.]+/g);
// ["ada@example.com", "help@askatool.com"]
Enter fullscreen mode Exit fullscreen mode

The flags change everything, so know these:

Flag Meaning
g Find all matches, not just the first
i Ignore case
m ^ and $ match at each line, not just the whole string
s . also matches newlines
u Unicode mode (emoji and other non-Latin characters)
y "Sticky": match only at the current position

A quick example of why m matters:

"line one\nline two".match(/^line \w+$/g);   // null
"line one\nline two".match(/^line \w+$/gm);  // ["line one", "line two"]
Enter fullscreen mode Exit fullscreen mode

Browser option: a Regex Tester lets you type the pattern and flags, paste your sample text, and see every match highlighted with a count. It's much faster than console.log in a loop.

3. Base64: it's encoding, not encryption

Base64 turns bytes into safe text. You see it in data URLs, email attachments, API keys and Basic Auth headers. Anyone can reverse it, so never treat it as a way to hide anything.

btoa("hello world");          // "aGVsbG8gd29ybGQ="
atob("aGVsbG8gd29ybGQ=");     // "hello world"
Enter fullscreen mode Exit fullscreen mode

One catch: btoa breaks on non-Latin characters. For Unicode text, encode to UTF-8 first:

const toB64 = (s) => btoa(String.fromCharCode(...new TextEncoder().encode(s)));
const fromB64 = (b) => new TextDecoder().decode(Uint8Array.from(atob(b), c => c.charCodeAt(0)));

toB64("héllo ✓");   // works
Enter fullscreen mode Exit fullscreen mode

Terminal:

echo -n 'hello world' | base64        # encode
echo 'aGVsbG8gd29ybGQ=' | base64 -d   # decode (use -D on older macOS)
Enter fullscreen mode Exit fullscreen mode

Browser option: a Base64 Encoder/Decoder handles both directions. A related job, encoding text for use in a URL, is covered by a URL Encoder/Decoder.

4. JWT: decoding is not verifying

A JWT is three Base64URL parts joined by dots: header.payload.signature. The first two are just JSON, so you can read them without any key:

const [header, payload] = token.split(".").slice(0, 2).map(part =>
  JSON.parse(atob(part.replace(/-/g, "+").replace(/_/g, "/")))
);

console.log(payload.exp);  // expiry as a Unix timestamp
Enter fullscreen mode Exit fullscreen mode

Two things trip people up:

  1. Reading a token proves nothing. Anyone can decode a JWT. Only checking the signature with the secret or public key, on your server, tells you it's genuine. Never trust a payload you've only decoded.
  2. exp and iat are Unix timestamps in seconds, not milliseconds. Multiply by 1000 before new Date(...), or use a Unix Timestamp Converter to see the date.

Browser option: a JWT Decoder splits the token and shows the header and payload as readable JSON.

A habit worth keeping: don't paste live production tokens, passwords or customer data into any online tool, however trustworthy it looks. Use a test token, or a copy with sensitive values removed.

The short version

Job In code In the browser
Format or validate JSON JSON.stringify(JSON.parse(x), null, 2) JSON Formatter
Test a regex text.match(/.../g) Regex Tester
Encode or decode Base64 btoa / atob Base64 Encoder
Read a JWT split, then Base64URL-decode JWT Decoder

The tools above are part of AskATool, a free collection of 200+ small web tools. There's no sign-up, and most of them run right in your browser.

What's the small job you keep googling every week? Drop it in the comments.

Top comments (0)