What is the correct way to support apostrophes in javascript when building up html?

Question

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

Answer 1

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 recommend 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.

Answer 2

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.