Remplacer tout <img> tag avec img alt text

Question

Je sais comment faire cela en php, mais j'ai besoin que cela soit fait en javascript/jquery.

J'essaie quelque chose comme ce qui suit:

$('#NewBox').html($('#OldBox').html().Replace('/<img(.*)alt="(.*)"\>/g', "$2")); 

Je ne pense pas que le javascript a un preg_replace, et tout ce que je connais est la méthode remplacer. utiliser "g" devrait remplacer toutes les instances par le second paramètre de la regex (étant alt). Une idée de pourquoi cela ne fonctionne pas?

MISE À JOUR: (espérons-ce comprend mieux ce que je veux)

J'ai une chaîne telle que celle-ci:

var str = 'This is a string with <img src="./images/logo.png" alt="logo" /> an image' 

Je veux remplacer tous les tags à l'intérieur de cette chaîne avec l'alt il est donc maintenant:

'This is a string with logo an image' 

Answer 1

Vous devez éviter les expressions régulières lorsque vous pouvez travailler en toute sécurité avec un outil d'analyse syntaxique. jQuery peut analyser ce code HTML pour vous.

var str = 'This is a string with <img src="./images/logo.png" alt="logo" /> an image'; 
console.log('input: '+str); 

// first create an element and add the string as its HTML 
var container = $('<div>').html(str); 

// then use .replaceWith(function()) to modify the HTML structure 
container.find('img').replaceWith(function() { return this.alt; }) 

// finally get the HTML back as string 
var strAlt = container.html(); 
console.log('output: '+strAlt); 

Sortie:

input: This is a string with <img src="./images/logo.png" alt="logo" /> an image 
output: This is a string with logo an image 

Voir demo fiddle.

Answer 2

Don't use regular expressions to manipulate HTML. Utilisez DOM. Cela va double lorsqu'il s'agit de JavaScript côté client, car la modification du HTML peut interrompre la liaison du gestionnaire d'événements. Juste obtenir chaque image, boucle sur chacun d'eux, et remplacer avec la valeur de l'attribut alt.

$('img').each(function() { 
    $(this).replaceWith(
    $(this).attr('alt') 
); 
});