Javascript parse html, modifica i tag di ancoraggio che contengono immagini

Question

Ho una vaga idea su come farlo, ma speravo che sviluppatori più esperti potessero avere una soluzione più semplice.

Ho una puntura di codice HTML da un feed JSON e dove esiste un tag "a" con immagini all'interno del tag "a" che voglio modificare e aggiungere attributi. Esempio:

<a style="color:000;" href="images/image.jpg"> 
    <img width="100" height="20" src="images/image_thumb.jpg" /> 
</a> 

vorrei cambiare per essere:

<a style="color:000;" href="images/image.jpg" rel="lightbox" > 
    <img width="100" height="20" decoy="images/image_thumb.jpg" /> 
</a> 

Così l'aggiunta di un attributo al "un" tag e modificando un attributo nel tag "img". C'è forse più collegamenti all'interno del codice HTML alcuni con e senza immagini e altro codice HTML che li circonda.

Per essere chiari, NON si sta modificando l'HTML già sottoposto a rendering sulla pagina, si sta modificando una stringa di codice prima che venga eseguito il rendering.

Per essere molto chiari qui è il feed JSON in questione: http://nicekiwi.blogspot.com/feeds/posts/default?alt=json

Il codice HTML che contiene i tag si trovano a "feed> voce> contenuti> $ t"

Attualmente sto lavorando con Mootools 1.3

Qualche idea? Grazie.

Answer 1

In primo luogo, lo mise in un nuovo elemento che non esiste nella pagina, poi modificarlo come al solito:

var container = new Element("div", { html: yourHTML }); 
container.getElements("a img").forEach(function(img){ 
    var link = img.getParent("a"); 
    img.decoy = img.src; 
    img.removeAttribute("src"); 
    link.rel = "lightbox"; 
}); 

Demo qui: http://jsfiddle.net/XDacQ/1/

Answer 2

In JS dritto

var a = document.createElement('div'); 

// put your content in the innerHTML like so 
a.innerHTML = '<a style="color:000;" href="images/image.jpg"><img width="100" height="20" src="images/image_thumb.jpg" /></a>'; 

var b = a.firstChild; 
b.rel = 'lightbox'; 
var c = b.firstChild; 
c.setAttribute('decoy', c.src); 
c.src = null; 

// now you have your a tag 
var newA = a.innerHTML; 

Answer 3

Dumbest regexp

var string = '<a style="color:000;" href="images/image.jpg">="images/image_thumb.jpg" /></a>', 
    text = ''; 

text = string.replace('href', 'rel="lightbox" href'); 
text = text.replace('src', 'decoy');