Javascript – Escaping double double quotes in html attributes in Javascript

angularjsescapingjavascript

I use bootstrap and create html nodes which contain popovers with jQuery. The popovers contain html so that I have problems with the quotes and escaping:

var content = '<input type="text" ng-model="test1" />';
var txt =     '<button type="button" data-container="body" ' +
                     'data-toggle="popover" title="myTitle" data-html="true" '+
                     'data-content="'+content+'">Click</button>';

How can I escape the double quotes inside the attributes => html-attributes? in the data-content attribute correctly?

Edit: I compile the code with angular so that it should also work with it.

Best Solution

If it is HTML, you can use HTML entities to escape characters that might be interpreted otherwise. For example, &quot; will be displayed as " in HTML attributes:

var content = '<input type=&quot;text&quot; ng-model=&quot;test1&quot; />';

Proof of concept: http://jsfiddle.net/teddyrised/5X5Ye/

Refer to W3C's HTML entities chart for more information: http://dev.w3.org/html5/html-author/charref