Partage
  • Partager sur Facebook
  • Partager sur Twitter

Remplacer les images d'un paragraphe par leur alt

Stocker le résultat dans une variable

Sujet résolu
    5 octobre 2021 à 10:49:37

    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

    • Partager sur Facebook
    • Partager sur Twitter
      5 octobre 2021 à 18:21:17

      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.

      • Partager sur Facebook
      • Partager sur Twitter
        5 octobre 2021 à 18:37:33

        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

        • Partager sur Facebook
        • Partager sur Twitter
          5 octobre 2021 à 20:29:01

          perso j'aurais stocké du texte, et non du html. C'est juste quand le client affiche le message qu'il y a besoin d'une image.
          • Partager sur Facebook
          • Partager sur Twitter
            6 octobre 2021 à 9:00:12

            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.

            • Partager sur Facebook
            • Partager sur Twitter
              6 octobre 2021 à 11:36:34

              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).

              • Partager sur Facebook
              • Partager sur Twitter
                6 octobre 2021 à 15:54:45

                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

                • Partager sur Facebook
                • Partager sur Twitter
                  6 octobre 2021 à 18:07:11

                  Ravi d'avoir pu t'aider =) il y a une bouton résolu (en haut de page il me semble). Bon développement !
                  • Partager sur Facebook
                  • Partager sur Twitter

                  Remplacer les images d'un paragraphe par leur alt

                  × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                  • Editeur
                  • Markdown