Échapper les Guillemets En HTML5, l'Attribut de Données à l'Aide de Javascript

Il n'y a pas moyen de contourner cela, vous avez pour échapper à l'valeurs correctement, ou le HTML ne peut pas être analysée correctement. Vous ne pouvez pas utiliser Javascript pour corriger le code après il est analysé, car il a déjà échoué.

Votre exemple avec le bon encodage HTML 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 les caractères, car il n'est pas du code Javascript. Vous utilisez des entités HTML pour les caractères d'échappement dans le code HTML.

Si vous ne pouvez pas contrôler la façon dont les données d'entrée, puis, vous êtes foutus. Vous devez simplement trouver un moyen de prendre le contrôle sur elle.

Utilisation encodeURI d'échapper les guillemets dans votre objet JSON. Analyser la chaîne avec decodeURI.

JS:

var popup = document.getElementById('popup'),
    msgObj = JSON.parse(decodeURI(popup.dataset.message));

console.log(msgObj);

HTML:

<a id="popup" href="#" data-message="%7B%22title%22:%22Print%22,%22message%22:%22Printing%20not%20yet%20implemented%22%7D" />

Ici est un simple outil que j'ai créé, vous pouvez l'utiliser pour coder en html:

L'astuce est de s'échapper deux fois.

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

En outre vous avez besoin d'échapper les guillemets pour le rendre sûr 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 un attribut de données sécurité de la chaîne.

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

À décoder retour html suffit d'utiliser:

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

Comme je l'ai utiliser l'attribut data pour transporter des données en collaboration avec l'élément html en PHP
pour le JavaScript, je viens d'utiliser base64_encode sur le serveur principal , puis sur le côté client d'utiliser base64Decode(input) récupérer les données. Cela me permet d'éviter de tout et de tous échapper à l'orgie.
Le JavasScript code que j'ai utiliser se trouve ici http://www.webtoolkit.info/

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

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

Ce faire:

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

Ou si l'utilisation est dans un script à distance de vous contrôler, stocker la valeur(s) dans un contexte mondial:

<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 à distance, et les informations doivent être stockées en tant que données d'attribut, vous pouvez le configurer avec javascript après vous trouver un moyen pour cibler le paragraphe:

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