Bonjour,

Je souhaite remplacer les <img> d'une chaîne de caractères par leurs attributs, par exemple dans :

<p class="contenucomm12345">test 3   <img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm"/> <img src="/monsite/img/emoji/smile.png" alt=":smile:" class="emoji_comm" /> <img src="/monsite/img/emoji/satisfied.png" alt=":satisfied:" class="emoji_comm"/> <img src="/monsite/img/emoji/kissing_heart.png" alt=":kissing_heart:" class="emoji_comm"/></p> 

Remplacer

<img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm"/>

 par :laughing

Pour cela, j'essaye d'utiliser une fonction comme celle ci

$(".contenucomm" + idcom + "  img").each(function(){
      
      res = $(".contenucomm" + idcom + "").html().replace(/<img(.*?)src="(.*?)"(.*?)>/g, $(this).attr('alt'));

    });

Cependant, elle ne m'affiche que le dernier attr répété pour chacun, ce qui est je pense le résultat de l'utilisation de each()

Comment parvenir à remplacer chaque occurence de <img> par leur attributs dans une chaîne de caractère ?

Merci d'avance

-
Edité par christ57 22 juin 2018 à 10:37:03

Elle ne modifie que le dernier ?

$(".contenucomm" + idcom + "  img").each(function(index, value){
       
      res = $(".contenucomm" + idcom + "").html().replace(/<img(.*?)src="(.*?)"(.*?)>/g, $(value).attr('alt'));
 
    });

Bonjour à toi et merci,

Oui c'est ça , elle remplace toutes les occurrences , 4 dans mon exemple, par le dernier attr trouvé et pas par leur attr respectifs.

Et comme cela? Désolé si je n'ai pas spécialement compris ce que tu cherchais à faire

$(".contenucomm" + idcom +"  img").each(function(){
      $(this).replaceWith($(this).attr('alt'));
});

-
Edité par BoNux 22 juin 2018 à 11:43:19

christ57 a écrit:

Bonjour à toi et merci,

Oui c'est ça , elle remplace toutes les occurrences , 4 dans mon exemple, par le dernier attr trouvé et pas par leur attr respectifs.

ok, est ce que ta essayé ma solution ?

Cher BoNux, tu as parfaitement compris mon problème et te remercie pour cette solution, est-il possible de stocker le résultat dans une variable ?

Cher DevMercenaire, ta solution m'a donné le même résultat que mon problème.

Oui.

var ancien = $(this).replaceWith($(this).attr('alt'));
var nouvelle = $(this).attr('alt');

DevMercenaire a écrit:

Oui.

var ancien = $(this).replaceWith($(this).attr('alt'));
var nouvelle = $(this).attr('alt');

@DevMercenaire cela ne fonctionnera pas car vu qu'on supprime l'image, il n'y aura plus d'attribut de disponible.

Il faut faire la récupération en amont :

$(".contenucomm" + idcom +"  img").each(function(){
      var alt = $(this).attr('alt'); // stockage de la valeur
      $(this).replaceWith(alt); // On utilise la valeur stockée pour le remplacement. Cela évite de réinterroger le DOM Tree inutilement.
});

BoNux a écrit:

@DevMercenaire cela ne fonctionnera pas car vu qu'on supprime l'image, il n'y aura plus d'attribut de disponible.

Il faut faire la récupération en amont :

$(".contenucomm" + idcom +"  img").each(function(){
      var alt = $(this).attr('alt'); // stockage de la valeur
      $(this).replaceWith(alt); // On utilise la valeur stockée pour le remplacement. Cela évite de réinterroger le DOM Tree inutilement.
});

Dans la doc. replaceWith renvoi les éléments supprimé ou bien c'est moi qui ai mal compris.

Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed

-
Edité par DevMercenaire 22 juin 2018 à 14:55:55

La fonction retourne en effet un résultat, mais celui-ci va correspondre dans ce cas du code HTML supprimé (donc la balise image).

Si j'ai bien saisi une nouvelle fois, je pense que @christ57 cherche a récupérer seulement la valeur du alt utilisé dans le remplacement.

Merci à vous je cherche à faire ceci , comme expliqué au début :

Transformer

<p class="contenucomm12345">test 3   <img src="/monsite/img/emoji/laughing.png" alt=":laughing:" class="emoji_comm"/> <img src="/monsite/img/emoji/smile.png" alt=":smile:" class="emoji_comm" /> <img src="/monsite/img/emoji/satisfied.png" alt=":satisfied:" class="emoji_comm"/> <img src="/monsite/img/emoji/kissing_heart.png" alt=":kissing_heart:" class="emoji_comm"/></p>

En

<p class="contenucomm12345">test 3   :laughing: :smile: :satisfied: :kissing_heart: </p>

@Christ57 le script que j'ai donné fait exactement ca.

Voici un jsfiddle pour te montrer le résultat : https://jsfiddle.net/xpvt214o/286048/

Par contre tu ne nous a pas expliqué comment tu déterminais la variable "idcom" que tu utilises dans le sélecteur JQuery.

Dans mon exemple, j'ai crée une variable en amont que j'ai forcé avec le même identifiant que ton bloc de contenu.

Effectivement, ça venait d'une erreur chez moi , la détermination du idcomm provient de la base de données dans le but de pouvoir le modifier par la suite.

Je souhaitais remplacer les <img...> par leur alt afin de ne pas avoir la balise HTML complète dans l'input de modification.

-
Edité par christ57 22 juin 2018 à 17:53:08

Tu peux cloner l’élément, le cacher et effectuer le traitement dessus si c'est ce que tu veux sinon attend @BoNux car il comprend mieux tes demandes que moi

@christ57 quelque chose comme ca ?

JSFiddle: https://jsfiddle.net/b25tmwzy/

$(".contenucomm" + idcom +"  img").each(function(){
      let newNode = $('<input/>').attr({type:'text', 'value': $(this).attr('alt') });
      $(this).replaceWith(newNode);
  
});

Au pire si tu cherches à gérer un formulaire d'édition en plus, rien ne t'empêche d'ajouter les inputs en fin de bloc comme ceci : https://jsfiddle.net/uob79tka/

$(".contenucomm" + idcom +"  img").each(function(){
      let newNode = $('<input/>').attr({type:'text', 'value': $(this).attr('alt') });
      $(this).parent().append(newNode);
  
   });

Et vu que je suis de bonne humeur ce soir, je te donne la version où on peux éditer ton alt après un clic sur l'image. Cela t'affichera un input à la place de ton image et lors de la sortie du focus, remplacera automatiquement le alt avec la nouvelle valeur

JSFiddle : https://jsfiddle.net/2kbpqvrj/

function editImgAlt() {
      let newNode = $('<input/>').attr({type:'text', 'value': $(this).attr('alt') });
      let initialNode =  $(this).replaceWith(newNode);
      newNode.on('blur', function() {
      	$(this).replaceWith(initialNode);
        initialNode.attr('alt', $(this).val());
        $(initialNode).on('click', editImgAlt);
      })
      newNode.focus();
}
$(".contenucomm" + idcom +"  img").on('click', editImgAlt );

Bon les deux derniers exemples sont bruts comme ca, il resterai quand même des infos à gérer afin de faire la liaison entre ton image modifiable et ton input.

-
Edité par BoNux 22 juin 2018 à 21:05:14

En me basant sur tes exemples je suis parvenu à faire ce que je souhaitais

Je ne peut rien ajouter a part grand merci pour ton aide, merci beaucoup et bonne continuation