0

I have a following situation:

I compose 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 &apos;, &#39; 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

wdc
  • 2,623
  • 1
  • 28
  • 41
  • 1
    `"javascript:foo(ba\'r)"` – epascarello Feb 14 '19 at 14:12
  • 1
    Still not sure how you "compose a string in JavaScript" and it would get this error. – epascarello Feb 14 '19 at 14:13
  • https://stackoverflow.com/questions/8744315/single-quote-escape-in-javascript-function-parameters – epascarello Feb 14 '19 at 14:14
  • Possible duplicate of [How do I escape a single quote?](https://stackoverflow.com/questions/2428572/how-do-i-escape-a-single-quote) – Constantin Chirila Feb 14 '19 at 14:15
  • Look the problem here is not only how to escape the single quote. Even when that's done, the `href` value is going to be incorrect because `ba'r` doesn't mean anything in JavaScript. – Pointy Feb 14 '19 at 14:15
  • It would be helpful to know exactly what it is you'd like to pass to the function `foo()` when the `` is clicked. – Pointy Feb 14 '19 at 14:17
  • 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 composed from some more variables, but at the end I have only a string as a parameter. – wdc Feb 14 '19 at 14:19
  • 2
    Well you're experience exactly the sort of difficulty that makes separating JavaScript and HTML the recommended 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 Feb 14 '19 at 14:25

3 Answers3

5

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>
jo_va
  • 13,504
  • 3
  • 23
  • 47
  • Looking at the first row of your code, if you call the frunction `bar` with string argument containing single quote :`foo("ba\'r")'` it will be escaped before the call of `innerHTML`, but after that `\'` will become `'` and produce the javascript error. – wdc Feb 14 '19 at 14:30
  • Oh I see, I updated the answer with an apostrophe like this `ba'r` – jo_va Feb 14 '19 at 14:46
1

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>';

Nguyen Phong Thien
  • 3,237
  • 1
  • 15
  • 36
0

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

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