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

我对如何做到这一点有一个模糊的想法，但我希望更有经验的开发人员可能有一个更简单的解决方案。Javascript解析html，修改包含图像的锚标签

我对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>

所以增加了“一”的标签属性和修改在“IMG”标签的属性。在HTML代码中可能存在多个链接，其中有一些链接了图片和其他HTML代码。

要清楚这不是修改已经呈现在页面上的HTML，而是在呈现之前修改一串代码。

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

包含代码的HTML代码以“饲料>条目>内容> $ T”被发现

我目前通过MooTools工作1.3

任何想法？谢谢。

来源

2011-08-18 Nicekiwi

这将是很高兴看到没有涉及正则表达式的答案... – 2011-08-18 04:45:45

在jQuery中轻而易举，但唉，你正在使用mootools！ – Mrchief

我不确定有关mootools，但在jQuery中，您可以使用removeAttr和attr方法轻松实现此目的。所有你需要做的是$（“a”）。attr（“rel”，“lightbox”）和var url = $（img）.attr（“src”）; $（IMG）.removeAttr（ “SRC”）; $（ “IMG”）ATTR（ “诱饵”，网址）; – swordfish

首先，把它放在不存在于页面上一个新的元素，然后修改它像往常一样：

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/

来源

2011-08-18 05:02:58 gilly3

在直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;

来源

2011-08-18 04:59:52 anthonyfojas

Dumbest正则表达式

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

来源

2011-08-18 05:03:36

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

回答

相关问题