Comment puis-je échapper aux guillemets dans les valeurs d'attribut HTML ?

Question

Je crée une ligne à insérer dans une table à l'aide de jQuery en créant une chaîne html, c'est-à-dire

 var row = "";
row += "<tr>";
row += "<td>Name</td>";
row += "<td><input value='"+data.name+"'/></td>";
row += "</tr>";

data.name est une chaîne renvoyée par un appel ajax qui peut contenir n'importe quel caractère. S'il contient un guillemet simple, ' , il cassera le code HTML en définissant la fin de la valeur de l'attribut.

Comment puis-je m'assurer que la chaîne est rendue correctement dans le navigateur ?

Answer 1

Il vous suffit d'échanger les caractères ' avec le code de caractère d'entité HTML équivalent :

 data.name.replace(/'/g, "'");

Alternativement, vous pouvez créer le tout en utilisant les méthodes de manipulation DOM de jQuery :

 var row = $("<tr>").append("<td>Name</td><td></td>");
$("<input>", { value: data.name }).appendTo(row.children("td:eq(1)"));

Answer 2

" = " or "

' = '

Exemples:

 <div attr="Tim &quot;The Toolman&quot; Taylor"
<div attr='Tim "The Toolman" Taylor'
<div attr="Tim 'The Toolman' Taylor"
<div attr='Tim &#39;The Toolman&#39; Taylor'

Dans les chaînes JavaScript, vous utilisez \ pour échapper le caractère guillemet :

 var s = "Tim \"The Toolman\" Taylor";
var s = 'Tim \'The Toolman\' Taylor';

Alors, citez vos valeurs d'attribut avec " et utilisez une fonction comme celle-ci :

 function escapeAttrNodeValue(value) {
    return value.replace(/(&)|(")|(\u00A0)/g, function(match, amp, quote) {
        if (amp) return "&";
        if (quote) return """;
        return " ";
    });
}

Answer 3

Ma réponse est partiellement basée sur Andy E et je recommande toujours de lire ce que verdy_p a écrit, mais la voici

 $("<a>", { href: 'very<script>\'b"ad' }).text('click me')[0].outerHTML

Avis de non-responsabilité : il ne s'agit pas d'une réponse à une question exacte, mais simplement de « comment échapper à l'attribut »

Answer 4

Utilisation de Lodash :

 const serialised = _.escape("Here's a string that could break HTML");

// Add it into data-attr in HTML
<a data-value-serialised=" + serialised + " onclick="callback()">link</a>
// and then at JS where this value will be read:
function callback(e) {  
    $(e.currentTarget).data('valueSerialised'); // with a bit of help from jQuery

    const originalString = _.unescape(serialised); // can be used as part of a payload or whatever.
}