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 Feed：http://nicekiwi.blogspot.com/feeds/posts/default?alt=json

包含代码的HTML代码位于“Feed＆gt;条目＆gt;内容＆gt; $ 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/

Answer 2

直接JS

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

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

3 个答案: