Combining single and double quotes in JavaScript

Question

I'm wondering if JavaScript has a writing format for using html elements that have both single and double quotes inside JavaScript functions. May be something like heredoc for javascript or it could be a function in jQuery. I couldn't find a solution to my problem and will try to describe it below:

I am writing a web page on php. I have a page and there is a form in it. There is a jQuery function that appends select elements to a form. After appending, user selects some options and submit the form. (I really wanted to paste a whole code here to make it clearer, but there is a big amount of code which is not so nice, so I tried to simplify it for you, sorry for some bad code)

I have a php variable like this one (select has onchange event, showUser is a function with AJAX request):

$string = <<<EOT
<select name="sapak[]" onchange='showUser(this.value, document.getElementsByName("dereje[]")[0].value)'>
EOT;

And there are many option in between and of course closing </select>(I didn't write all the code to be shorter). A part of jQuery function that appends select to the form:

$(wrapper).append('<div> <? echo $string; ?> <a href="#" class="remove_field">Del</a></div>');

My problem here is that in $string variable I have to use single and double quotes, and when it comes to append() function in jQuery I use quotes again. And all these give me error in browser's console Uncaught SyntaxError: Unexpected identifier, because of single quotes started at append(' , but ending at onchange=' . Is there are any smart solution for this? I thought that heredoc will be, I've googled and I think that actually there is no heredoc for javascript. May be some other formattings available?

@Imperative I've tried it, but ended up again with many quotes : $(wrapper).append('

'); — candle, Mar 30 '15 at 08:33
I used character escaping at the beginning, but it didn't work. May be I missed something( — candle, Mar 30 '15 at 08:44

EdenSource · Accepted Answer · 2015-03-30T08:40:05.190

1

This should work :

$(wrapper).append("<div> <? echo $string; ?> </div>");

$string = <<<EOT
<select name=\"sapak[]\" onchange=\"showUser(this.value, document.getElementsByName('dereje[]')[0].value)\">
EOT;

As @Imperative advises about character escaping

edited Mar 30 '15 at 08:40

answered Mar 30 '15 at 08:34

EdenSource

3,387
16
29

thanks, but still the same error "Uncaught SyntaxError: Unexpected identifier" : $(wrapper).append("

– candle Mar 30 '15 at 08:41
Actually error gone after deleting the . Should I escape "#" also? – candle Mar 30 '15 at 08:52
You have to escape every double quotes within your string but not the single quote – EdenSource Mar 30 '15 at 08:54
Could I use single quotes on $(wrapper).append('
echo $string; ?>
'); ? I have auto generating code with many double code inside, so I prefer to use single quotes in jQuery function – candle Mar 30 '15 at 09:01
Yes you can, in this case, you'll have to escape single quotes within your string. – EdenSource Mar 30 '15 at 09:09

Combining single and double quotes in JavaScript

1 Answers1