I have a following situation:

I pose a string in javascript that include apostrophe character. That string is actually html code that is later attached to html using innerHTML method. So the code looks something like this:

var str = '<a href="javascript:foo("ba'r")">link</a>'; (argument of the foo function is string)

And after that, this string is inserted into some html element like this:

dataHolder.innerHTML = str;

I've tried to escape ' character with ', ' and \u0027 but all of that is rendered as ' after innerHTML method is called, so when the method foo from the example above is called by clicking on link I always get javascript error saying: Uncaught SyntaxError: missing ) after argument list

I have a following situation:

I pose a string in javascript that include apostrophe character. That string is actually html code that is later attached to html using innerHTML method. So the code looks something like this:

var str = '<a href="javascript:foo("ba'r")">link</a>'; (argument of the foo function is string)

And after that, this string is inserted into some html element like this:

dataHolder.innerHTML = str;

I've tried to escape ' character with ', ' and \u0027 but all of that is rendered as ' after innerHTML method is called, so when the method foo from the example above is called by clicking on link I always get javascript error saying: Uncaught SyntaxError: missing ) after argument list

• javascript
• html

• 1 "javascript:foo(ba\'r)" – epascarello Commented Feb 14, 2019 at 14:12
• 1 Still not sure how you "pose a string in JavaScript" and it would get this error. – epascarello Commented Feb 14, 2019 at 14:13
• stackoverflow./questions/8744315/… – epascarello Commented Feb 14, 2019 at 14:14
• 1 @Pointy I only want to pass a string containing single quote to javascript function. But I see, here the argument isn't a string, but actually this str variable is just part of the argument which is posed from some more variables, but at the end I have only a string as a parameter. – Gavrilo Adamovic Commented Feb 14, 2019 at 14:19
• 2 Well you're experience exactly the sort of difficulty that makes separating JavaScript and HTML the remended way of doing things, using DOM APIs to assign functions as event handlers. It's a real mess to do it via string building code. – Pointy Commented Feb 14, 2019 at 14:25

3 Answers 3

You need to have both ' and " in your string, so you will need a third way to delcare a string, you can use template strings for that. Declare your ba'r string as a template string and escape its apostrophe using a backslash \:

document.querySelector('#myDiv').innerHTML =
    '<a href="javascript:foo(`ba\'r`)">link</a>';

function foo(data) {
  console.log(data);
}

<div id="myDiv"></div>

use \' instead of ' inside the string, so it should be

var str = '<a href="javascript:foo(ba\'r)">link</a>';

However, this code is just correct in string format aspect. I think what you want could be

var str = '<a href="javascript:foo(\'bar\')">link</a>';

You can also use the backtick ` to avoid this problem:

var str = `<a href="javascript:foo(ba'r)">link</a>`;