Citations d'échappement dans l'attribut de données HTML5 à l'aide de Javascript

J'utilise les .data() de jQuery pour travailler avec des attributs de données HTML5 personnalisés où la valeur de l'attribut doit contenir à la fois des guillemets simples et des guillemets doubles:

 <p class="example" data-example="She said "WTF" on last night's show."> 

Je connais l'utilisation de codes de caractères comme &quot; Dans la valeur de l'attribut de données, le travail ci-dessus peut être effectué, mais je ne peux pas toujours contrôler la saisie des valeurs. De plus, je dois pouvoir utiliser les balises HTML dans le balisage, comme ceci:

 <p class="example" data-example=" She said "<abbr title="What The F***">WTF</abbr>" on last night's show. "> 

Si une forme de .replace() est la réponse, il doit être fait avant que la valeur ne soit lue par .data() peut-être en l'appliquant sur l'ensemble du <body> ?

La barre oblique invariable s'échappant comme <abbr title="te\'st">WTF</abbr> ne fonctionne pas non plus.

Idéalement, cela aurait la flexibilité de travailler avec les deux:

data-example="..." et data-example='...'

Mais si ce n'est que possible, je pourrais au moins jouer avec ça. Des idées?

Mise à jour – un peu plus de contexte:

Je travaille sur ce sujet pour responsejs.com . Une application réelle de ce pourrait être de ne charger qu'une barre latérale pour les navigateurs au-dessus d'une certaine largeur (et avoir ce traité dans le navigateur plutôt que PHP). Dans le cas de WordPress, par exemple, la barre latérale peut contenir des widgets, des images, etc. Les guillemets dans les tags PHP sont sans problème b / c ils sont analysés en HTML avant d'accéder au navigateur. Exemple:

 <aside id="primary" class="sidebar" data-oweb=' <?php dynamic_sidebar( 'primary' ); ?> ' > optional default markup for mobile and no-js browsers here </aside> 

Il n'y a aucun moyen de le faire, vous devez échapper correctement aux valeurs, ou le HTML ne peut pas être analysé correctement. Vous ne pouvez pas utiliser Javascript pour corriger le code après avoir été analysé, car il a déjà échoué.

Votre exemple avec un codage HTML approprié serait:

 <p class="example" data-example="She said &quot;&lt;abbr title=&quot;What The F***&quot;&gt;WTF&lt;/abbr&gt;&quot; on last night's show."> 

Vous ne pouvez pas utiliser la barre oblique inverse pour échapper aux caractères, car ce n'est pas un code Javascript. Vous utilisez des entités HTML pour échapper aux caractères dans le code HTML.

Si vous ne pouvez pas contrôler la façon dont les données sont entrées, alors vous êtes vissé. Il vous suffit de trouver un moyen de prendre le contrôle.

Si elles doivent être des chaînes HTML avec " et ' et quoi, pourquoi ne pas simplement créer des éléments HTML séparés pour eux: http://jsfiddle.net/N7XXu/ .

Par exemple, le HTML:

 <p class="example" data-which="1">a</p> <p class="example-data" data-which="1">She said "<abbr title="What The F***">WTF</abbr>" on last night's show.</p> 

En combinaison avec le JavaScript suivant:

 $('.example').each(function() { var correspondingElem = $('.example-data[data-which="' + $(this).data('which') + '"]'); $(this).data('example', correspondingElem.html()); }); alert($('.example').data('example')); 

Bien sûr, cachez les éléments de .example-data .

Utilisez encodeURI pour échapper aux guillemets dans votre objet JSON. Analyser la chaîne avec decodeURI.

 var popup = document.getElementById('popup'), msgObj = JSON.parse(decodeURI(popup.dataset.message)); console.log(msgObj); 
 <a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" /> 

Pour qu'il soit bon html, vous devez échapper aux personnages ennuyeux. Je les échapperais avec des entités HTML. Cela signifie que n'importe quel outil utilisé pour entrer cette information aurait dû les stocker correctement et / ou l'outil qui les récupère sur le dos devrait les échapper.

Ensuite, si vous souhaitez les utiliser dans votre JS, vous devriez exécuter certaines fonctions de recherche et remplacement pour convertir les caractères en HTML et les guillemets.

La plupart des langages de développement de back-end ont une sorte de fonctionnalité 'htmlescape / unescape', ce qui ne devrait pas être difficile.

Pour l'échouer via jQuery, voici quelque chose trouvé via un Google rapide: http://www.naveen.com.au/javascript/jquery/encode-or-decode-html-entities-with-jquery/289

Voici un outil simple que j'ai créé que vous pouvez utiliser pour coder html:

Le hasard est de l'échapper deux fois.

J'ai ajouté un remplacement \ n pour préserver le texte multiligne car il est rejeté par le texte ().

En outre, vous devez échapper aux guillemets pour le rendre sécurisé pour un attribut de données.

 <div id="esc"></div> <textarea id="escinput" placeholder="Enter text"></textarea> <script> $("#escinput").bind("change paste keyup", function(){ $("#esc").text($(this).val().replace(/\n/g,'\\n')); $("#esc").text($("#esc").html().replace(/"/g, '&quot;')); }); </script> 

Cela devrait créer une chaîne sécurisée d'attributs de données.

Vous pouvez le tester ici: http://jsfiddle.net/SplicePHP/n6HFq/

Pour le décoder en html, utilisez simplement:

 <script> var attr = $("#idOfElement").data('attribute'); var decoded = $('<textarea/>').html(attr).val(); </script> 

New to Stack Overflow, donc je n'ai pas assez de points de rep pour voter, mais je voulais clarifier la solution car j'ai mal interprété la réponse acceptée par @Guffa que j'ai été fouettée.

J'ai eu une question similaire concernant les caractères d'échappement / spéciaux dans les attributs de données HTML5. La question / solution: Escape / Special Characters from user input to HTML5 data-attributes using URL Encode / Decode

Dan Smith a fourni la solution que j'ai utilisée avec encodeURI () / decodeURI (). Cependant, je l'ai rejeté initialement parce qu'il était si loin avec seulement 1 point de rep.

Toute réponse avec l'échappement manuel des personnages devient désordonnée et prend du temps.

Toutes les réponses avec la méthode escape () sont maintenant obsolètes. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

J'aime stocker des données directement dans javascript. Au lieu de cela:

 <p class="example" data-oweb="<?=str_replace('\'', '\\\'', $var)?>">Content</p> <script> var example = $('.example').data("example"); DoSomething(example); </script> 

Faire cela:

 <p class="example">Content</p> <script> var example = '<?=str_replace('\'', '\\\'', $var)?>'; DoSomething(example); </script> 

Ou si l'utilisation se fait dans un script distant que vous contrôlez, enregistrez la (les) valeur (s) dans un environnement global:

 <p class="example">Content</p> <script> window.MyDataValues={}; window.MyDataValues.Example = '<?=str_replace('\'', '\\\'', $var)?>'; </script> 

Ou si vous ne pouvez pas contrôler le script distant, et que l'information doit être stockée en tant qu'attribut de données, vous pouvez la définir avec javascript après avoir trouvé un moyen de cibler le paragraphe:

 <p id="example" data-oweb>Content</p> <script> document.getElementById("example"); element.dataset.oweb = '<?=str_replace('\'', '\\\'', $var)?>'; </script> 

C'est un peu délicat, mais vous pouvez sélectionner des objets dom avec leurs attributs de data qui contiennent des guillemets simples. L'astuce est \\'

 <div id="text" data-message="Stanley Kubrick's Oranges">Hello</div> <script> var message = "Stanley Kubrick\\'s Oranges"; $("#text[data-message='"+message+"']").fadeOut("slow"); </script> 

Violon

Utilisez la méthode btoa pour définir les données et la méthode atob pour l'obtenir:

  $(document).data("test2",btoa('She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">')) 

Ou simplement désélectionnez la chaîne en tant que variable:

  var stringer = 'She said "<abbr title="What The F***">WTF<\/abbr>" on last nights show.">' $(document).data("test2",stringer); 

Les références

  • HTML5 Living Standard, API d'applications Web: méthodes d'utilité Base64