Javascript function Call. Escape quotes in strings

Question

Alright and my query is, How do I escape quotes in Javascript? I'm trying to alert the message with my code below. I know it won't work because it contains string in double quotes within the onClick function call and it gives the syntax error. How do I make it work? My condition is that I cannot use single quotes for parameter in my function call.

    <html>
    <head>
    <script type="text/javascript">
    function litString(vals)
    {
    alert(vals);
    }
    </script>
    </head>
    <body>

    <?php echo "Just for a Test<br/>"; ?>

    <a href="#" onClick="litString("test one")"><h2>JS String Literal</h2></a>
    </body>
    </html>

Update:

My actual intention is to make the below PHP+JS code combination work:

 echo '<li><a href="#" title="'.$res_bb['eng'].'" onClick=loadChap('.$res_bb['id'].','.$res_bb['chapters'].',"'.$res_bb['mal'].'")><font size="2">'.$res_bb['mal'].'</font></a></li>';

The entire anchor tag is already in PHP's echo in single quote! — Jenson M John, Apr 14 '13 at 06:02
No it isn't. The only thing being echoed is `"Just for a Text
"`. — Barmar, Apr 14 '13 at 06:15
And if it is in an echo, you can escape the single quotes to keep it from breaking PHP. — Barmar, Apr 14 '13 at 06:16
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/28185/discussion-between-jenson-m-john-and-barmar) — Jenson M John, Apr 14 '13 at 06:26

Barmar · Accepted Answer · 2013-04-14T06:34:08.060

You escape quotes with backslash \.

<a href="#" onClick="litString(\"test one\")"><h2>JS String Literal</h2></a>

Or you can use single quotes:

<a href="#" onClick="litString('test one')"><h2>JS String Literal</h2></a>

Or you can use single quotes around the attribute, and double quotes inside:

<a href="#" onClick='litString("test one")'><h2>JS String Literal</h2></a>

If you're echoing the string, it gets a little trickier, because you also have to deal with PHP's quoting. Here I produce the second version above by escaping the single quotes.

echo '<li><a href="#" title="'.$res_bb['eng'].'" onClick="loadChap('.$res_bb['id'].','.$res_bb['chapters'].',\''.$res_bb['mal'].'\')"><font size="2">'.$res_bb['mal'].'</font></a></li>';

I just tested this with input:

$res_bb = array('eng'=> "Title", 'id'=> 10, 'chapters'=> 13, 'mal'=> "Foo bar");

The output was:

<li><a href="#" title="Title" onClick="loadChap(10,13,'Foo bar')"><font size="2">Foo bar</font></a></li>

I Cannot use your 2nd & 3rd solution because my condition is juz like that. & My Intention was only to apply with your FIRST solution. But That didn't work @ all..:( Can you Just verify? — Jenson M John, Apr 14 '13 at 06:05
In your comment above, you mentioned that this is in a PHP echo, although that's not how it appears in the question. If that's the case, you need to escape the backslashes. — Barmar, Apr 14 '13 at 06:17

score 3 · Answer 2 · answered Apr 14 '13 at 06:03

3

I suggest using addEventListener and data-* attributes for a cleaner approach:

<a href="#" id="someButton" data-litString="test one">...

<script>
  var link = document.getElementById('someButton');

  link.addEventListener('click', function () {
    var vals = this.getAttribute('data-litString');
    alert(vals);
  });
</script>

answered Apr 14 '13 at 06:03

Joseph

117,725
30
181
234

JS String Literal
Does it work? – Jenson M John Apr 14 '13 at 06:11

score 0 · Answer 3 · answered Apr 14 '13 at 05:59

0

Use single quotes for the HTML attribute:

onClick='litString("test one")'

But that's not really a solution. You need to escape those double quotes somehow.

answered Apr 14 '13 at 05:59

Blender

289,723
53
439
496

I cannot use single quotes for the HTML attribute because already anchor tag in PHP's single quote.! @barmar has given 2 more methods & I just want to use his first method but that didn't work @ all! :( – Jenson M John Apr 14 '13 at 06:08

m.spyratos · Answer 4 · 2013-04-14T06:27:29.757

0

Maybe it's better to go this way...

<li><a href="#" title="<?php echo $res_bb['eng']; ?>" onClick=loadChap("<?php echo $res_bb['id']; ?>", "<?php echo $res_bb['chapters']; ?>"," <?php echo $res_bb['mal']; ?>")><font size="2"><?php echo $res_bb['mal']; ?></font></a></li>

edited Apr 14 '13 at 06:27

answered Apr 14 '13 at 06:06

m.spyratos

3,823
2
31
40

It returned with some parse Error. Anyway that got it worked with Barmar's updated solution. Thanks. – Jenson M John Apr 14 '13 at 06:47

Javascript function Call. Escape quotes in strings

4 Answers4

JS String Literal