DEV Community

Pepsi
Pepsi

Posted on

Why JSON.parse Fails on Valid JSON (Hidden Unicode Characters)

Sometimes JSON.parse throws an “Unexpected token” error even when the JSON looks completely valid.

This confused me for a long time.

Example:

const json = '{ "name": "John" }';
JSON.parse(json);

Looks correct, right?

But sometimes when copying JSON from Slack, Word, Notion, or ChatGPT, hidden Unicode characters are inserted into the string.

Common culprits include:

• Zero Width Space (U+200B)

• Byte Order Mark / BOM (U+FEFF)

• Non-breaking space (U+00A0)

These characters are invisible, but they break parsers.

Example with hidden character:

{​ "name": "John" }

That tiny invisible character before the quote can cause:

Unexpected token in JSON at position X

Debugging this is frustrating because the character cannot be seen in most editors.


Quick Fix in JavaScript

You can remove common hidden characters with:

str.replace(/[\u200B-\u200D\uFEFF]/g, "")

But first you need to detect them.


Tool to Detect Hidden Unicode Characters

While debugging this issue I built a small browser tool that helps detect and remove invisible Unicode characters.

It highlights things like:

• Zero Width Space

• BOM

• Non-breaking spaces

• Other hidden Unicode

You can try it here:

https://unicodecleaner.online

The tool runs 100% client-side, so text never leaves your browser.


Why This Happens

Many tools automatically insert formatting characters when copying text. These characters are valid Unicode but not expected by strict parsers.

So the JSON looks correct but fails to parse.


Conclusion

If JSON.parse fails on valid-looking JSON:

  1. Check for hidden Unicode characters
  2. Log character codes
  3. Strip zero-width characters

Invisible characters are a surprisingly common source of parsing bugs.

Top comments (0)