JavaScript: Escaping double quotes in HTML

Since no one seems to have exactly the right answer in my opinion:

for (i=0; i<=images.length-1; i++) {
    gallery += '<img width="250" height="250" src="' +  images[i].src +
               '" title="' + images[i].title.replace(/\"/g,'&quot;') + '" />';
}

This replaces all quotes, and you end up with double quotes, and they are represented in an HTML format that is valid.


You can use the replace() method to escape the double quotes:

for (var i = 0; i < images.length; ++i) {
    gallery += '<img width="250" height="250" src="' + images[i].src +
               '" title="' + images[i].title.replace(/\"/g, '\\"') + '" />';
}

The result will be a valid JavaScript string, but it won't work as HTML markup, because the HTML parser doesn't understand backslash escapes. You'll either have to replace double quote characters with single quotes in your image title:

for (var i = 0; i < images.length; ++i) {
    gallery += '<img width="250" height="250" src="' + images[i].src +
               '" title="' + images[i].title.replace(/\"/g, "'") + '" />';
}

Or invert the quote types in your markup:

for (var i = 0; i < images.length; ++i) {
    gallery += "<img width='250' height='250' src='" + images[i].src +
               "' title='" + images[i].title + "' />";
}

var_name.replace(/\"/gi, '%22');

That's the one you're looking for. Even if your colors look "off" in Visual Studio.

\ escapes the following quote.

gi does a replace for all occurrences.