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
任何想法?谢谢。
答
首先,把它放在不存在于页面上一个新的元素,然后修改它像往常一样:
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";
});
答
在直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;
答
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 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