Javascript解析html,修改包含图像的锚标签

Question

我对如何做到这一点有一个模糊的想法,但我希望更有经验的开发者可能有一个更简单的解决方案.

我从JSON提要中获得了一些HTML代码,其中存在"a"标记,其中包含我想要修改的"a"标记内的图像并添加属性.例:

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

我想将其改为:

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

因此,在"a"标记中添加属性并修改"img"标记中的属性.HTML代码中可能有多个链接,包括图像和其他HTML代码.

要清楚这不是修改已在页面上呈现的HTML,这是在呈现之前修改一串代码.

在这里要非常清楚的是有问题的JSON提要:http://nicekiwi.blogspot.com/feeds/posts/default ?alt = json

包含标记的HTML代码位于"feed> entry> content> $ t"

我目前正在使用Mootools 1.3

有任何想法吗？谢谢.

Answer 1

首先，将其放入页面上不存在的新元素中，然后照常修改：

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";
});

演示在这里： http: //jsfiddle.net/XDacQ/1/