Picture of Chuck Lorenz
current page prepended to link URL
by Chuck Lorenz - Wednesday, 31 May 2017, 10:46 AM

Sharing a recent experience to help others avoid the pain…

The symptom:
Normal hyperlinks in JSON such as
<a href=‘​http://www.sanjoaquinaudubon.org' target=‘_blank’>winter migration</a>
would display correctly when served and when the source code was inspected with developer tools. However, the link was malformed. Clicking the link produced a 404 error. Hovering over the link revealed a construction similar to

Tom Greenfield (aka Hawkeye) clued me into the existence of zero-width space (https://en.wikipedia.org/wiki/Zero-width_space).

The cure:
Identify and remove the zero-width spaces. The problem is the offender can’t be seen since it is zero-width—it doesn’t take up space; it is invisible.

If you use Sublime Text, you can download and install https://github.com/tomgreenfield/Pastage. This is a package that Tom created for processing copied text as it is being pasted into your JSON. Among other formatting tasks, it eliminates zero-width spaces.

If you use Webstorm, you can find Victor Rosenberg’s Zero Width Characters locator (https://plugins.jetbrains.com/plugin/7448-zero-width-characters-locator) among the plug-ins. Install it and it will locate these characters during inspection and give you the option of deleting them.