Why am I getting this weird “line break”?

Question

A similar question was asked (and answered), but there was no answer / decision on how to fix it.

I am using jQuery Mobile / Handlebars for my Phonegap project. So far, everything seemed to be working fine. But all of a sudden, I get this strange line break:

"​ " 

I use the following code to create a 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 could be causing this?

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

A bit more debugging and it seems like the problem might be this:

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

Answer 1

So, I found a solution from this thread .

The problem is that when you try to extract the html javascript lines you can get zero width space .

Unicode has the following zero-width characters:

• space with zero width U + 200B
• U + 200C zero width without Unicode code point
• U + 200D joiner with zero width Unicode code point
• U + FEFF zero width without spaces Unicode code point

So, to fix my problem, I use a regex to remove unicode charecter:

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

Answer 2

I had the same problem and found a solution. The problem is due to the fact that we copy fragments from www to our editor, and sometimes this leads to the fact that a symbol of type space copied as a numeric object. The editor parses the object, so everything looks normal. The solution is to find a way to highlight numerical objects (if it is not built into your editor, look for an extension) and delete it. Regex / replace is not a solution .

Answer 3

The problem for me was that the Handlebar template was saved using the "UTF-8 with specification" milling. But it needs to be saved as "UTF-8 without specification . "

If you are using a Jetbrains environment such as Webstorm, simply right-click on the file and click on Delete Specification.

You can learn more about the difference between the two here: What is the difference between UTF-8 and UTF-8 without specification?