Escaping double quotes in JavaScript onClick event handler

javascript html escaping dom-events

105,375

Solution 1

Did you try

" or \x22

instead of

\"

Solution 2

It needs to be HTML-escaped, not Javascript-escaped. Change \" to "

Solution 3

While I agree with CMS about doing this in an unobtrusive manner (via a lib like jquery or dojo), here's what also work:

<script type="text/javascript">
function parse(a, b, c) {
    alert(c);
  }

</script>

<a href="#x" onclick="parse('#', false, 'xyc&quot;foo');return false;">Test</a>

The reason it barfs is not because of JavaScript, it's because of the HTML parser. It has no concept of escaped quotes to it trundles along looking for the end quote and finds it and returns that as the onclick function. This is invalid javascript though so you don't find about the error until JavaScript tries to execute the function..

Solution 4

You may also want to try two backslashes (\\") to escape the escape character.

Solution 5

I think that the best approach is to assign the onclick handler unobtrusively.

Something like this:

window.onload = function(){
    var myLink = document.getElementsById('myLinkId');
    myLink.onclick = function(){ 
        parse('#', false, '<a href="xyz');
        return false;
    }
}

//...


<a href="#" id="myLink">Test</a>

View more solutions

105,375

Author by

Admin

Updated on July 08, 2022

Comments

Admin almost 2 years
The simple code block below can be served up in a static HTML page but results in a JavaScript error. How should you escape the embedded double quote in the onClick handler (i.e. "xyz)? Note that the HTML is generated dynamically by pulling data from a database, the data of which is snippets of other HTML code that could have either single or double quotes. It seems that adding a single backslash ahead of the double quote character doesn't do the trick.
```
<script type="text/javascript">
    function parse(a, b, c) {
        alert(c);
    }
</script>

<a href="#x" onclick="parse('#', false, '<a href=\"xyz'); return false">Test</a>
```
Nosredna almost 15 years

Classic. Stackoverflow ate one of your backslashes and displayed only the other one. I fixed it for you.
Admin almost 15 years

Downvote. You do NOT need a framework for something like this!
Mamey almost 14 years

I just tested this in FF3.6 and IE8 under a similar scenario and it didn't work. However replacing the " with " did. I also tested the exact code above and it worked both ways. In short the \x22 does not appear to work under all scenarios and you should try " in that event.
NoBugs almost 13 years

Nice. " seems to work in html tag attributes in Webkit and Firefox and Opera.
Matt over 7 years

For me, " worked fine inside an click event: <a href="javascript:;" onclick="$("[id$='_txtFieldToClear']").val("&‌quot;);">Clear</a>
LIvanov over 2 years

The better answer, since it also explains the "why"