title: JavaScript escape '," characters
body: <p>I am facing problems with escape ' character inside the onclick of an a tag</p>
  
  <p>I have tried surrounding the string with double and single quotes. But I still face the issue</p>
  
  <pre><code>for(i in result.MenuItems){
  var itemName = result.MenuItems[i].name;
  html+=  "&lt;a onclick=return \'itemDescr(\""+itemName+"\",\""+restName+"\")\'&gt;"+
  '
  &lt;div&gt;
     ' +
     '
     &lt;div&gt;
        '+
        '
        &lt;div style="float:left;width:50%;"&gt;
           &lt;h3 style="color:orange"&gt;'+itemName+'&lt;/h3&gt;
        &lt;/div&gt;
        '+
        '
     &lt;/div&gt;
     '+
     '
  &lt;/div&gt;
  '+
  '&lt;/a&gt;';
  }
  html+='&lt;/div&gt;';
  </code></pre>
  
  <p>Problem area in the above code:
  html+=  ""+
  '
  say if eiter name or rest name have ' then the code breaks during actual invocation of that function</p>
  
  <p>The final html looks like::</p>
  
  <hr>
  
  <pre><code>::html::  &lt;div id="items"&gt;&lt;h1&gt;Items&lt;/h1&gt;&lt;a onclick=return
   'itemDescr("Pho","Panda Garden")'&gt;&lt;div&gt;&lt;div&gt;&lt;div
   style="float:left;width:50%;"&gt;&lt;h3
   style="color:orange"&gt;Pho&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;a onclick=return
   'itemDescr("Chinese Dumplings","Panda Garden")'&gt;&lt;div&gt;&lt;div&gt;&lt;div
   style="float:left;width:50%;"&gt;&lt;h3 style="color:orange"&gt;Chinese
   Dumplings&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;a onclick=return
   'itemDescr("Gyoza","Panda Garden")'&gt;&lt;div&gt;&lt;div&gt;&lt;div
   style="float:left;width:50%;"&gt;&lt;h3
   style="color:orange"&gt;Gyoza&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;a onclick=return
   'itemDescr("Stinky Tofu","Panda Garden")'&gt;&lt;div&gt;&lt;div&gt;&lt;div
   style="float:left;width:50%;"&gt;&lt;h3 style="color:orange"&gt;Stinky
   Tofu&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;a onclick=return 'itemDescr("Veggie
   Burger","Panda Garden")'&gt;&lt;div&gt;&lt;div&gt;&lt;div
   style="float:left;width:50%;"&gt;&lt;h3 style="color:orange"&gt;Veggie
   Burger&lt;/h3&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>When I click on one of the a tags I get below error:</p>
  
  <p>Uncaught SyntaxError: Invalid or unexpected toke</p>
  
  <p>itemDescr("Lamb Curry","Andala</p>
  
  <p>It should have been :</p>
  
  <p>itemDescr("Lamb Curry","Andala's");</p>