Échapper aux guillemets doubles dans le gestionnaire d'événement JavaScript onClick

Question

Le bloc de code simple ci-dessous peut être affiché dans une page HTML statique mais entraîne une erreur JavaScript. Comment devez-vous échapper au guillemet double intégré dans le bloc de code 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'autres codes HTML qui peuvent avoir des guillemets simples ou doubles. Il semble que l'ajout d'une simple barre oblique inversée devant le caractère de 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>

Answer 1

Avez-vous essayé

" ou \x22

au lieu de

\"

?

Answer 2

Il doit être encodé en HTML, pas en Javascript. Modifier \" à "

Answer 3

Bien que je sois d'accord avec le CMS pour faire cela de manière discrète (via une librairie 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 y a des ratés n'est pas due à JavaScript, mais à l'analyseur HTML. Il n'a aucun concept de guillemets échappés, il se promène à la recherche du guillemet final, le trouve et le renvoie à la fonction onclick. Il s'agit d'un javascript invalide, donc vous ne découvrirez l'erreur que lorsque JavaScript essaiera d'exécuter la fonction.

Answer 4

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

Answer 5

Je pense que la meilleure approche est d'assigner 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>