Why am I getting this weird “​” line break?

Question

A similar question have been asked (and answered), but there were no answer / solution on how to fix it

I'm using jQuery Mobile / Handlebars for my Phonegap project. Up till now everything seemed to work just fine. But suddenly I get this weird line break:

"​                               "

I use the following code to make the list:

    // HTML
    <ul id="guideListView" data-role="listview" ></ul>

    <script id="guideListTemplate" type="text/x-handlebars-template">​
        {{#if this}}
            {{#each this}}
            <li class="guide">
                <a href="{{guideUrl}}{{id}}" data-transition="slide" class="ui-nodisc-icon" >
                    <div class="name">{{name}}</div>
                    <div class="num-stores-container no-bold small">Stores: <span class="num-stores">{{storesCount}}</span></div>
                </a>
            </li>
            {{/each}}
        {{else}}
            <li class="ui-btn">Sorry, no guides for <span class="city"></span></li>
    {{/if}}
    </script>

    // JS
    var template = Handlebars.compile($("#guideListTemplate").html());
    $('#guideListView').append(template(guides));
    $('#guideListView').listview().listview('refresh');

Does anyone know what might be causing this?

updated
I've tried using ("#guideListTemplate").html().trim() and $('#guideListView').html(template(guides));, but that didn't make any difference. Could this be a big in jQuery Mobile?

A bit more debugging and it seems the problem might lie in this:

<script id="guideListTemplate" type="text/x-handlebars-template">​

Answer 1

Ok, so I found a solution from this thread.

The problem is that when you try to fetch the html of a javascript string, you might get zero width space.

Unicode has the following zero-width characters:

• U+200B zero width space
• U+200C zero width non-joiner Unicode code point
• U+200D zero width joiner Unicode code point
• U+FEFF zero width no-break space Unicode code point

So to fix my problem by I use regular expression to remove the unicode charecter:

var source = $("#guideListTemplate").html().replace(/[\u200B]/g, '');

Answer 2

I just had the same problem and found the solution. The problem stems from the fact we copy-paste snippets from the www into our editor and sometimes it results in a character like space being copied as a numeric entity. The editor parses the entity so everything looks ordinary. The solution is to find a way to highlight numeric entities (if it's not built-in in your editor, look for an extension) and deleting it. Regex/replace is not a solution.