21 of 25
deleted 4 characters in body
canon
  • 40.4k
  • 4
  • 31
  • 47

#This is just a rite of passage.

With BOMs, zero-width spaces, combining characters, confusables, etc... the best thing you can do is teach people to inspect their strings so they're equipped for this type of issue in the future:

This string has some zero-width spaces:

[..."​​​​hi"].forEach((char, index) =>
  console.log("index: %o, code: %o, char: %o", 
    index, 
    char.charCodeAt(0), 
    char)
);

This string has a combining tilde:

[..."mañana"].forEach((char, index) =>
  console.log("index: %o, code: %o, char: %o", 
    index, 
    char.charCodeAt(0), 
    char)
);

This one doesn't:

[..."mañana"].forEach((char, index) =>
  console.log("index: %o, code: %o, char: %o", 
    index, 
    char.charCodeAt(0), 
    char)
);

Some characters just look really similar (or identical)...

[..."oοо"].forEach((char, index) =>
  console.log("index: %o, code: %o, char: %o", 
    index, 
    char.charCodeAt(0), 
    char)
);

If you can come up with an elegant, non-intrusive way to visualize all of those cases, that I can optionally toggle on, then I'd support it.


##As for your red dots...

CodeMirror, utilized by the Stack-Snippets™ editor, uses (char code 8226) to visualize the zero-width space.

red dot zero-width character replacement in snippet editor

Those characters are tagged with the cm-invalidchar CodeMirror CSS class. If we're stuck with materializing these spaces, we could at least change the syntax highlighting to more readily differentiate them from the other literal characters.

alternate syntax highlighting for cm-invalidchar

Personally, I'm not a fan of an editor injecting characters into my literals which literally aren't there. Strings have enough ways to deceive you. This method also fails to address any of the other issues which present in the same fashion.

canon
  • 40.4k
  • 4
  • 31
  • 47