Bonjour,

Je souhaite pouvoir donner la possibilité aux utilisateurs de modifier un commentaire sur mon site. Pour cela, en cliquant sur un lien le contenu de leur commentaire est ajouté à un textarea pour modification.

Ce commentaire est susceptible de contenir des emojis , que je souhaiterai remplacer par leur alt, il peut y en avoir plusieurs dans un paragraphe.

Mon code est le suivant : 

    var commvalue = document.querySelector('.commcontent'+e.target.getAttribute('data_idcomm')+''); // récupération du commentaire

// Remplacement des emoji par leur alt

commvalue.querySelectorAll('img').forEach(
      el =>
      {
        el.replaceWith(document.createTextNode(el.alt))
      }
    );

    // on insère le contenu du commentaire dans le textarea

    textarea_comm.value += commvalue;

Le problème est le suivant : vous l'aurez compris le texte affiché sur le textarea est modifié mais également celui du commentaire original ce que je ne souhaite pas.

Est il possible de faire cette opération de changement de la balise img par son alt sans modifié le contenu original du paragraphe mais uniquement pour la textarea ?

Merci d'avance

Bonjour,

Je pense que tu fais ça dans le mauvais sens : dans le commentaire original ou la modification, c'est une balise (en général délimité par des ":") ça ne se transforme en image qu'à l'affichage sur le client. Stocker une image en bdd c'est pas fou, le texte c'est plus pratique. Petite précision : alt avec img c'est le texte qui s'affiche quand tu passe la souris dessus.

Bonsoir,

Non, aucune image n'est stockée en BDD le commentaire est parsé avant insertion : quand l'utilisateur ajoute un emoji à son texte il apparaît sous la forme suivante :emoji: , il est ensuite converti en balise img avant insertion en BDD.

Ce que je souhaite faire c'est l'exact inverse : quand l'utilisateur clique sur 'Modifier', c'est simplement remplacer <img.... par son alt qui est sous la forme :emoji:.

Je veux bien croire que je fais ça dans le mauvais sens mais que dois-faire alors ?

Merci

Je suis d'accord avec ça mais le problème initial restera le même : si j'affiche l'image sur le commentaire et que l'utilisateur veut le modifier (donc affichage sur le textarea pour modification) je me retrouverais avec le code HTML d'affichage de l'image sur le textarea ce que je ne souhaite pas.

Je vais essayer d'utiliser replaceAll()  et une REGEX après récupération du commentaire avec innerHtml afin que le commentaire affiché ne soit pas modifié et que seulement ce qui sera affiché sur le textarea le soit.

Ah, je crois que j'avais mal compris le problème : quand tu clique sur éditer, le commentaire est toujours affiché ? Il faut le cloner avant de faire des modifications dans ce cas (ou supprimer le commentaire lors de l'édition).

Voilà c'est exactement ça le commentaire est toujours affiché. Je vais me renseigner sur le clonage  : element.cloneNode semble être ce que je recherche.

C'est bien ce que je recherche.

Merci à toi de m'avoir aiguillé vers le clone d’élément , possibilité que je ne connaissais pas 

Merci encore et bonne continuation

-
Edité par christ57 6 octobre 2021 à 17:50:05