get Zero-width non-joiner (‌) with innerHTML

Question

I'm trying to get a ‌ with innerHTML

The output should be

This div contains a zero-width‌‌non-joiner, a non-breaking space & an ampersand

But the output is:

This div contains a zero-width‌non-joiner, a non-breaking space & an ampersand

How can I get the ‌?

alert(document.getElementsByTagName('div')[0].innerHTML)

<div>This div contains a zero-width&zwnj;non-joiner, a non-breaking&nbsp;space &amp; an ampersand</div>

Fiddle: https://jsfiddle.net/yst1Lanv/

Answer 1

You can search for it using its unicode \u200c. Then replace it with ‌ string.

alert(document.getElementsByTagName('div')[0].innerHTML.replace(/\u200c/g, '‌'))

<div>This div contains a zero-width&zwnj;non-joiner, a non-breaking&nbsp;space &amp; an ampersand</div>

Answer 2

Your character is in the extracted (innerHTML) text, just not encoded as its HTML entity.

If you want you can replace the character with its entity:

alert(document.getElementsByTagName('div')[0].innerHTML.replace(/‌/g, '‌'));

<div>This div contains a zero-width&zwnj;non-joiner, a non-breaking&nbsp;space &amp; an ampersand</div>

Yong Quan posted some nicer code than me, if you want your app to be more maintainable use the unicode. My regex above is pretty confusing, this is easier to read:

.replace(/\u200c/g, '‌')