Single quote inside string is incorrectly represented

Question

I have a button in HTML and in the onclick event I get few arguments. My argument is something that looks like this:

javascript:Email('Andy.n@gmail.com' ,'19','1','2017','106 O'Horg St, Del-5th floor boardroom')

Now the problem is in this value '106 O'Horg St, Del-5th floor boardroom',

Since I have O' in my value, my complete string is broken and I am not able to use it. Can anybody help me how to resolve this? Here is my sample code where I am taking data and evaluating.

onclick="javascript:Email(\''+facilityOwnerEmail+'\' ,\''+i+'\',\''+monthNumber+'\',\''+yearnum+'\',\''+locArray[j][0]+'\')"

I can not replace ' by any other character, as it will then not match with the data in back-end.

You'll have to provide more information (code), on how you get to this string, because the notation you use is already a syntax error in itself. — trincot, Jan 15 '17 at 09:12
@trincot I am getting this email data where i need `O'` in one of value. I want how to handle in this kind of situation because if there is no single quote in value things are working perfectly. — user12345, Jan 15 '17 at 09:15
have you tried escaping it with a slash `'106 O\'Horg St, Del-5th floor boardroom'` — chiliNUT, Jan 15 '17 at 09:16
@user12345, you should provide the code on how you get the data from the email into this argument you speak about. There are hundreds of ways this can happen, and we cannot know which unless you provide the code. — trincot, Jan 15 '17 at 09:18
I don't think this is a duplicate, as the real problem here is a wrong design pattern. — trincot, Jan 15 '17 at 10:18

score 3 · Answer 1 · answered Jan 15 '17 at 09:16

3

A few options:

Use double quotes instead:

"106 O'Horg  St, Del-5th floor boardroom"

Use back ticks instead (ES6+):

`106 O'Horg  St, Del-5th floor boardroom`

Escape the problematic single quote using a \:

'106 O\'Horg  St, Del-5th floor boardroom'

answered Jan 15 '17 at 09:16

nem035

34,790
6
87
99

score 0 · Answer 2 · answered Jan 15 '17 at 10:15

You need to escape quotes in that string, which can become rather complicated and leads to hard-to-read code. Instead of going for this, I would suggest to use a completely different pattern to create these clickable elements:

Instead of generating HTML, use the DOM API to create elements;
Instead of using the onclick attribute, add a click listener via code (using .addEventListener())

If you do it like that, you will not have to worry about escaping quotes, as no strings are evaluated with this method of working.

Here is a small example, where one such element is added to the document:

// Dummy Email implementation: you would use your own of course:
function Email(a, b, c, d, e) {
    console.log('calling Email with following arguments:');
    console.log([a, b, c, d, e].join(','));
}

// Sample data:
var facilityOwnerEmail = 'Andy.n@gmail.com',
    i = 19,
    monthNumber = 1,
    yearnum = 2017,
    j = 0,
    locArray = [["106 O'Horg St, Del-5th floor boardroom"]];

// 1. generate clickable element via the DOM API, without the onclick attribute:
var div = document.createElement('div');
div.textContent = 'click here';
// 2. Provide the click handler dynamically, binding the arguments to a copy of the Email function
//   -- now there is no problem with quotes anymore:
div.addEventListener('click', Email.bind(null, facilityOwnerEmail,i,monthNumber,yearnum,locArray[j][0]));
// 3. add that element to your document, at the desired place (I chose body as example):
document.body.appendChild(div);
// For any other such elements to generate, repeat the above three steps
// ...

Single quote inside string is incorrectly represented

2 Answers2