Monday, May 2, 2011

Javascript escaping in an onclick handler

I was having trouble escaping quotes that are in an onclick handler.
The problem is that the onclick event is surounded by double quotes so there can not be any double quotes inside. I have javascript code in there that has single quotes and I escape other single quotes like this \' but double quotes can't be escaped. I found that a good way of allowing double quotes inside is to contert them to javascript escape characters such as \042 or \x22 or \u0022 which are all interprited by javascript as double quotes. If you use the " then you find out that the browser converts them to their double quote equivalents before the javascript engine can see them and then it causes javascript errors because it finds a double quote inside the onclick events double quotes and not the html entities.
Here is a list of other possibilites.
http://stackoverflow.com/questions/97578/how-do-i-escape-a-string-inside-javascript-inside-an-onclick-handler

here is the php functions that will take care of both the above javascript escaping and html escaping as well

<?php
function esc_js($value){
//use this in onclick handlers where all quotes need to be seen as quotes by javascript
//here is the double quote equivilent \x22
//here is the single quote equivilent \x27
$value = str_replace("\"","\\x22",$value);
$value = str_replace("'","\\x27",$value);
return $value;
}

function esc_html($value){
//this encodes both single and double quotes so they appear in textbox values correctly
$value = htmlentities($value,ENT_QUOTES);
return $value;
}
?>

$val1="test's test";
$val2='test"s test';
$val3="test\"s test's";

<a href="" onclick="alert('<?php echo esc_js($val1);?>');return false">test 1</a><br>
<a href="" onclick="alert('<?php echo esc_js($val2);?>');return false">test 2</a><br>
<a href="" onclick="alert('<?php echo esc_js($val3);?>');return false">test 3</a><br>

11 comments:

nikhil reddy said...

I found a lot of information here to create this actually best for all newbie here. Thank you for this information.
Data Science Training In Hyderabad
Data Science Course In Hyderabad

nikhil reddy said...

HI, Thanks for sharing wonderful stuff....

Data Science Training in Hyderabad

VMS Degree College said...


Thanks For Sharing The Wonderfull Content With Us !
Best Degree College In Hyderabad
Best Degree College In Attapur

EXCELR said...

It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...data science courses

Maneesha said...

Hey there! Do you know if they make any plugins to help with Search Engine Optimization? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good gains. If you know of any please share. Thank you!|
data scientist training in hyderabad

Ramesh Sampangi said...

Very clear explanation and knowledgeable blog. This blog is very interesting to read. Thanks for sharing this blog.
Data Science Course in Hyderabad

Kelly Technologies said...

Wonderful blog found to be very impressive and I want to express my admiration of your writing skills. I really appreciate the blogger for the efforts they have put in to develop such an amazing content

Data Science Training in Hyderabad

360DigiTMG said...

They're produced by the very best degree developers who will be distinguished for your polo dress creation. You'll find Ron Lauren inside an exclusive array which includes particular classes for men, women.
data analytics training in hyderabad

360digiTMG.com said...

Well, this got me thinking what other workouts are good for those of us who find ourselves on the road or have limited equipment options. data analytics course in surat

360digiTMG.com said...

You have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site. business analytics course in mysore

Datascience pune said...

This article is very informative and contains all the details in a presentable and easy-to-understand format. Data scientists and data analytics aspirants will find this article extremely helpful. 360DigiTMG brings excellent data science courses and imparts students with the best theoretical and practical knowledge. This article will help you assess yourself and get the right course in the field of data science.
data science certification course in pune