Escaping apostrophe in JavaScript or PHP

Question

I have a foreach loop in PHP:

var circle_<?php echo $x; ?> = '<?php echo $c; ?>';

It returns this in JavaScript:

var circle_0 = '<p class="medium">With us, you can customize more than just a closet.</p>';

var circle_1 = '<p class="medium">We are boutique condo builders who love what we do.</p>';

var circle_2 = '<p class="medium">who says condos can't be spacious?<br/></p>';

As you can see, circle_2 has an apostrophe in the string, and as a result it breaks the script:

Uncaught SyntaxError: Unexpected token ILLEGAL

What filter would I use to fix this (PHP or JavaScript)?

always use `json_encode()` to generate Javascript data from a PHP program. — Spudley, Apr 04 '13 at 15:13

score 8 · Answer 1 · edited May 04 '15 at 21:04

8

Using PHP, you could try:

  <?php echo str_replace("'", "\'",$c);

edited May 04 '15 at 21:04

Peter Mortensen

30,738
21
105
131

answered Apr 04 '13 at 15:09

TommyBs

9,354
4
34
65

used this method and it worked, thanks. – user990717 Apr 04 '13 at 15:13

score 4 · Answer 2 · answered Apr 04 '13 at 15:11

4

PHP addslashes() function will help you: http://php.net/manual/en/function.addslashes.php

answered Apr 04 '13 at 15:11

barbashov

542
3
9

This won't necessarily work as it will also addslashes to his css class attributes e.g
– TommyBs Apr 04 '13 at 15:25
@TommyBs yes, you're right. Didn't mention this case. Anyway, Spudley's json_encode() approach is really better than any hand-made quotes escaping. – barbashov Apr 04 '13 at 15:42

score 3 · Answer 3 · answered Apr 04 '13 at 15:18

3

Don't use a foreach loop for this, and don't use addslashes or any of the other bad answers here.

Write your code like this:

echo "var circle = ".json_encode($carray).';';

where $carray is the array that you're currently looping with foreach() to get $x and $c.

This will create a Javascript array that looks like this:

var circle = [
    '\'<p class="medium">With us, you can customize more than just a closet.</p>\'',
    '\'<p class="medium">We are boutique condo builders who love what we do.</p>\'',
    '\'<p class="medium">who says condos can't be spacious?<br/></p>\''
];

You can then access the elements as circle[0], circle[1], etc.

Hope that helps.

answered Apr 04 '13 at 15:18

Spudley

166,037
39
233
307

Just out of curiosity can you explain why they are "bad answers" and why yours is the preferred approach? I'm not arguing with you, but I would like to see more reasoning/proof behind this as I've not seen anyone suggest this approach before (again not arguing or disagreeing but I'd like to see something to support this). I can understand if it was all coming from a JSON response, but wondered if you could provide more explanation. – TommyBs Apr 04 '13 at 15:21
For anyone else looking at this, the answer to my question in my opinion is - it is easier to maintain, easier to read, and the escaping is done for you. It allows you to use js to manipulate js, rather than having a lot more interspersed coding languages (albeit there is still a single echo statement) It also pushes some of the processing to the client rather than the server (the case with foreach) - Not sure what performance implications this would have on large arrays though. Hopefully Spudley might have more to add. – TommyBs Apr 04 '13 at 15:49
2

@TommyBs: `addslashes` was put into the PHP language long before JSON was invented, and does not escape all chars required by JSON. So although it may work for the examples given in the question, it cannot be guaranteed to work in all cases; eg if he decides to format his HTML with newline characters. In addition, the question states that he's using a `foreach` loop to generate separate named javascript variables for each element in his PHP array. This is not best practice; it would be be better to output a Javascript array. A single `json_encode()` call is all that's needed. – Spudley Apr 04 '13 at 15:51
2

@TommyBs - to expand on your comment that *"it pushes processing to the client"* - not really true. The overhead for Javascript of having a large number of named variables is higher than having them in an array, especially if his JS code then tries to access the variables by using substrings to build the variable names. Given the way he's formatting his names, I'd expect that to be the case, but that would *definitely* be worse for his JS performance than a simple array. – Spudley Apr 04 '13 at 15:56

Escaping apostrophe in JavaScript or PHP

3 Answers3