Javascript анализировать HTML, изменить теги привязки, которые содержат изображения

Question

У меня есть смутное представление о том, как это сделать, но я надеялся, что более опытные разработчики могут найти более простое решение.

У меня есть строка HTML-кода из фида JSON, и там, где существует тег «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/

Answer 2

Самое глупое регулярное выражение

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

Answer 3

В прямой 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;