Steven Steven - 3 months ago 6
jQuery Question

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

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:

"​ "

enter image description here

I use the following code to make the list:

<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>
<li class="ui-btn">Sorry, no guides for <span class="city"></span></li>

// JS
var template = Handlebars.compile($("#guideListTemplate").html());

Does anyone know what might be causing this?


I've tried using
, 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">​


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, '');