Javascript analizar html, modificar las etiquetas de anclaje que contienen imágenes

Question

Tengo una vaga idea de cómo hacer esto, pero esperaba que los desarrolladores más experimentados podrían tener una solución más simple.

Tengo un pinchazo de código HTML de un feed JSON y donde existe una etiqueta "a" con imágenes dentro de la etiqueta "a" que deseo modificar y agregar atributos. ejemplo:

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

me gustaría cambiar que sea:

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

por lo que añadir un atributo a la "una" etiqueta y la modificación de un atributo en la etiqueta "img". Puede haber múltiples enlaces dentro del código HTML, algunos con y sin imágenes y otros códigos HTML que los rodean.

Para que quede claro, esto NO modifica el código HTML ya procesado en la página, esto está modificando una cadena de código antes de que sea procesada.

Para ser extremadamente claro aquí es la alimentación JSON en cuestión: http://nicekiwi.blogspot.com/feeds/posts/default?alt=json

El código HTML que contiene las etiquetas se encuentran en "alimentación> Entrada> Contenido> $ t"

Actualmente estoy trabajando con Mootools 1.3

¿Alguna idea? Gracias.

Answer 1

En primer lugar, la puso en un nuevo elemento que no existe en la página, a continuación, modificarlo como de costumbre:

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 aquí: http://jsfiddle.net/XDacQ/1/

Answer 2

En JS recta

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

Digesta expresión regular

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');