i have the following code:

var name = "Joe O'Neal";

var row= [];
row.push(
  "<td><input type='hidden' name='milestones[" + id + "].Name' 
   value='" + name + "' class='currentRowName'  />
    <span class='currentRowNameText'>" + name + "</span></td>")

but the issue is that i have a situation where there is an apostrophe in the name variable so it causes problems with this:

  value='" + name + "'

what is the correct way to write this to avoid any conflicts with apostrophes? In C#, i would do something like

  value=\"" + name + "\"

but that doesn't seem to work in javascript

i have the following code:

var name = "Joe O'Neal";

var row= [];
row.push(
  "<td><input type='hidden' name='milestones[" + id + "].Name' 
   value='" + name + "' class='currentRowName'  />
    <span class='currentRowNameText'>" + name + "</span></td>")

but the issue is that i have a situation where there is an apostrophe in the name variable so it causes problems with this:

  value='" + name + "'

what is the correct way to write this to avoid any conflicts with apostrophes? In C#, i would do something like

  value=\"" + name + "\"

but that doesn't seem to work in javascript

• javascript
• jquery
• double-quotes
• apostrophe

• I don't think there is a correct way... but I prefer to use ' for string literals like `'<div class="value">dd</div>' – Arun P Johny Commented Jun 11, 2014 at 3:44
• @Arun P Johny- i don't understand what you are suggesting – leora Commented Jun 11, 2014 at 3:46
• 4 You need to sanitize your input. You need some method for replacing the single quotes with the HTML entities. There are many ways to do this. This question has several answers: http://stackoverflow./q/24816/940217 – Kyle Falconer Commented Jun 11, 2014 at 3:46
• if you know you are only going to get apostrophise and not double quotes, you can switch your quotes round: ...value="' + name + '"... But this is just a temporary fix. – Zack Newsham Commented Jun 11, 2014 at 4:40
• @Kyle - if you convert this to an answer i will accept – leora Commented Jun 11, 2014 at 4:48

2 Answers 2

What you're looking to do is sanitize your input. To do this, you might define a helper method which replaces any unsafe characters with either the Unicode equivalent or the HTML entity. Not only is this sort of thing used for escaping quotes, but it can also help prevent things like XSS Attacks.

Short-term fix

The following is adapted from Tom Gruner's answer from this other question on Escaping HTML strings with jQuery.

var entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
        return entityMap[s];
    });
}

And then to use this, you would do something like the following:

var name = "Joe O'Neal";
var safe_name = escapeHtml(name);

var row= [];
row.push(
    "<td><input type='hidden' name='milestones[" + id + "].Name' 
    value='" + safe_name + "' class='currentRowName'  />
    <span class='currentRowNameText'>" + safe_name + "</span></td>");

Long-term fix

If you find yourself doing this a lot, then it may be time to start using a template library which can do this automatically. One template library I remend and find useful is the Google Closure Templates. It is an enterprise-grade template library which will (by default) sanitize your HTML.

For more information on how Closure Templates help protect you, you can check out the page they have on security.

You can quote characters:

var apostophe = '\''

or use HTML entities if intended to be used in an HTML document:

var apostrophe = ''';
var apostrophe = ''';

or use unicode:

var apostrophe = '\u0027';

So you can do:

var name = 'O\u0027Neal';
el.innerHTML = '<input value="' + name + '">';

Mapping of characters to one of the above (entity or Unicode value) is fairly simple using replace with a regular expression.