Assainir les entrées de l'utilisateur avant de les ajouter au DOM en Javascript

Jamais utiliser escape(). Ça n'a rien à voir avec L'encodage HTML. C'est plus comme un encodage D'URL, mais ce n'est pas vraiment ça. C'est un encodage non standard bizarre disponible seulement en JavaScript.

si vous voulez un encodeur HTML, vous devrez l'écrire vous-même car JavaScript ne vous en donne pas un. Par exemple:

function encodeHTML(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}

cependant pendant que ceci est assez pour mettre votre user_id dans des endroits comme le input value, ce n'est pas assez pour id parce que IDs ne peut utiliser qu'une sélection limitée de caractères. (Et % n'est pas parmi eux, de sorte que escape() ou encore encodeURIComponent() n'est pas bon.)

vous pouvez inventer votre propre schéma d'encodage pour mettre n'importe quel caractère dans un ID, par exemple:

function encodeID(s) {
    if (s==='') return '_';
    return s.replace(/[^a-zA-Z0-9.-]/g, function(match) {
        return '_'+match[0].charCodeAt(0).toString(16)+'_';
    });
}

Mais vous avez encore un problème si le même user_id se produit deux fois. Et pour être honnête, l'ensemble de la chose avec jeter autour des chaînes HTML est généralement une mauvaise idée. Utilisez plutôt les méthodes DOM, et conservez les références JavaScript pour chaque élément, de sorte que vous n'avez pas à continuer à appeler getElementById, ou s'inquiéter de la façon dont les chaînes arbitraires sont insérées dans les IDs.

par exemple.:

function addChut(user_id) {
    var log= document.createElement('div');
    log.className= 'log';
    var textarea= document.createElement('textarea');
    var input= document.createElement('input');
    input.value= user_id;
    input.readonly= True;
    var button= document.createElement('input');
    button.type= 'button';
    button.value= 'Message';

    var chut= document.createElement('div');
    chut.className= 'chut';
    chut.appendChild(log);
    chut.appendChild(textarea);
    chut.appendChild(input);
    chut.appendChild(button);
    document.getElementById('chuts').appendChild(chut);

    button.onclick= function() {
        alert('Send '+textarea.value+' to '+user_id);
    };

    return chut;
}

vous pouvez également utiliser une fonction de convenance ou un framework JS pour réduire la longueur des appels de create-set-appends.

ETA:

j'utilise jQuery pour le moment comme un cadre

d'accord, alors considérez les raccourcis de création jQuery 1.4, par exemple.:

var log= $('<div>', {className: 'log'});
var input= $('<input>', {readOnly: true, val: user_id});
...

le problème que j'ai maintenant est que J'utilise JSONP pour ajouter des éléments et des événements à une page, et donc je ne peux pas savoir si les éléments existent déjà ou pas avant de montrer un message.

Vous pouvez garder une recherche de user_id pour les nœuds d'élément (ou le papier d'emballage des objets) en JavaScript, pour éviter de mettre cette information dans les DOM, où les caractères qui peuvent aller dans un id sont limités.

var chut_lookup= {};
...

function getChut(user_id) {
    var key= '_map_'+user_id;
    if (key in chut_lookup)
        return chut_lookup[key];
    return chut_lookup[key]= addChut(user_id);
}

(_map_ le préfixe est parce que les objets JavaScript ne sont pas tout à fait fonctionne comme un mappage de chaînes arbitraires. La chaîne vide, et, dans IE, certains Object noms des membres, le confondre.)