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

发布于 2024-11-29 22:41:38 字数 907 浏览 0 评论 0原文

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

我有一段来自 JSON feed 的 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 > entry > content > $t”中找到

我目前正在使用 Mootools 1.3

Any想法？谢谢。

原文

I have a vague idea on howto do this but I hoped more experienced devs might have a simpler solution.

I have a sting of HTML code from a JSON feed and where an "a" tag exists with an images inside the "a" tag I want to modify and add attributes. example:

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

I would like to change it to be:

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

So adding an attribute to the "a" tag and modifying an attribute in the "img" tag. There maybe multiple links within the HTML code some with and without images and other HTML code surrounding them.

To be clear this is NOT modifying HTML already rendered on the page, this is modifying a string of code before it gets rendered.

To be extremely clear here is the JSON feed in question: http://nicekiwi.blogspot.com/feeds/posts/default?alt=json

The HTML code that contains the tags are found at "feed > entry > content > $t"

Am currently working with Mootools 1.3

Any ideas? Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

诠释孤独 2024-12-06 22:41:38

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

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/

First, put it in a new element that does not exist on the page, then modify it as usual:

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

回复收藏 0 原文

锦爱 2024-12-06 22:41:38

直接用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;

In straight 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;

回复收藏 0 原文

落花随流水 2024-12-06 22:41:38

最愚蠢的正则表达式

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

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

回复收藏 0 原文

~没有更多了~