escape special characters in javascript (jquery) function

Question

I have this line that appending this in jquery:

$('#league2').append("<input type=\"button\" id=\"2btn\" value=\"1.2\" class=\"butta\"  onmousedown=\"active('exam\'ple','awayteam')");

Notice the "exam\'ple"... i escaped the ' with \' so when clicking the button, the function active should work.

this is the function active:

function active(hometeam,awayteam){
alert("if this is alerted, it works!");
}

when i click the button it should alert "if this is alerted, it works!", but it's not alerting it. and it think because when i use the function, this is the outpot:

function active(exam\'ple,awayteam){

when i appending the same thing with a word that does not contain " ' ", it is working.

Adonais · Accepted Answer · 2012-07-07 19:45:18Z

2

You need to escape the backslash in your parameters for the active function, instead of the apostrophe.

$('#league2').append("<input type=\"button\" id=\"2btn\" value=\"1.2\" class=\"butta\"  onmousedown=\"active('exam\\'ple','awayteam')");

To escape a string to append it to that code with php, you can use regular expressions. The following will work in your case.

// Replaces a backslash with four backslashes: The 'append' function will interpret it as two backslashes; the 'active' function, as only one.
$str = preg_replace("/\\\\/", "\\\\\\\\\\\\\\\\", $str);
// Replaces an apostrophe with two backslashes and an apostrophe, then javascript will append only one backslash and an apostrophe, escaping that way an apostrophe.
$str = preg_replace("/'/", "\\\\\\\\'", $str);
// Replaces quotations with a backslash and quotations: the quotations will be escaped inside the append function, so one quotations will be printed out on your HTML
$str = preg_replace("/\"/", "\\\\\"", $str);

If you don't know what a regular expression (regex) is, I suggest you researching a bit about how to use them. They will help you a lot.

EDIT: By some reason, the last program needed double of backslashes to work. Updated.

edited Jul 7, 2012 at 19:45

answered Jul 7, 2012 at 18:59

Adonais

1,2926 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

EtayRock Over a year ago

Works!! thank you, but i need a little bit more help. lets say i'm getting this exam'ple from a php mysql database. so the varriable is stored in $test how do i echo exam\'ple like this "exam\\'ple"?

Adonais Over a year ago

So you're getting the strings from a database and then appending them to the HTML using php, right?

EtayRock Over a year ago

yes. how do i add the 2 backslashes before the " ' " using php?

EtayRock Over a year ago

i saw it, and i am getting an error when using the first example Warning preg_replace(): No ending delimiter '/' found in ..... on line 243

Adonais Over a year ago

Yeah. I don't know why php interprets backslashes on preg functions in a weird way. Updated the answer, at least it now works on my computer.

|

SomeKittens · Accepted Answer · 2012-07-07 19:10:58Z

1

You don't need to escape single quotes when the string is double-quoted. It's best practice to wrap the whole string in single quotes, allowing you to use double quotes without the need to escape. (or single quotes with it all wrapped up in doubles).

For example:

$("#thing").append('<div id="foo" class="bar" style="color:black;" onclick="foobar()"></div>');

Your code's a little more complicated, because there's multiple levels (have you considered jQuery's click?):

$('#league2').append('<input type="button" id="2btn" value="1.2" class="butta"  onmousedown="active('exam\'ple','awayteam')');

edited Jul 7, 2012 at 19:10

answered Jul 7, 2012 at 18:59

SomeKittens

39.6k19 gold badges117 silver badges145 bronze badges

1 Comment

jamesmortensen Over a year ago

This is more of a best practice. Escaping quotes in strings is very ugly and is a last resort. +1

Collectives™ on Stack Overflow

escape special characters in javascript (jquery) function

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related