web-dev-qa-db-fra.com

Échapper les guillemets doubles dans le gestionnaire d'événements JavaScript onClick

Le bloc de code simple ci-dessous peut être affiché dans une page HTML statique mais entraîne une erreur JavaScript. Comment échapper au guillemet double incorporé dans le gestionnaire onClick (c'est-à-dire\"xyz)? Notez que le code HTML est généré dynamiquement en extrayant des données d'une base de données, dont les données sont des extraits d'un autre code HTML qui pourrait avoir soit un simple soit un double Il semble que l'ajout d'une barre oblique inverse avant le caractère guillemet double ne fasse pas l'affaire.

<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>
javascripthtmljavascript-eventsescaping
59
user133046

As-tu essayé

&quot; ou \x22

au lieu de

\"

?

83
Landon Kuhn

Il doit être échappé HTML, pas échappé Javascript. Changement \" à &quot;

53
Aseem Kishore

Bien que je sois d'accord avec CMS sur le fait de le faire de manière discrète (via une bibliothèque comme jquery ou dojo), voici ce qui fonctionne également:

<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>

La raison pour laquelle il barfs n'est pas à cause de JavaScript, c'est à cause de l'analyseur HTML. Il n'a pas de concept de guillemets échappés pour se débrouiller tout en cherchant le guillemet final et le trouve et le renvoie comme fonction onclick. Ce n'est pas du javascript non valide, donc vous ne trouvez rien sur l'erreur jusqu'à ce que JavaScript essaie d'exécuter la fonction.

6
seth

Vous pouvez également essayer deux barres obliques inverses (\\") pour échapper au caractère d'échappement.

5
Mark A. Nicolosi

Je pense que la meilleure approche est d'attribuer le gestionnaire onclick discrètement .

Quelque chose comme ça:

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

//...


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