Javascript parse html, 이미지가 포함 된 앵커 태그 수정

Question

howto에 대한 모호한 생각이 있습니다.하지만 좀 더 숙련 된 개발자가 더 간단한 해결책을 원하기를 바랍니다.

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 코드를 둘러싼 다른 HTML 코드가있을 수 있습니다.

이것은 페이지에 이미 렌더링 된 HTML을 수정하지 않음을 의미합니다. 이는 렌더링되기 전에 코드 문자열을 수정하는 것입니다.

여기에 매우 명확하게하기 위해 문제의 JSON 피드이다 http://nicekiwi.blogspot.com/feeds/posts/default?alt=json 태그가 포함 된 HTML 코드는 "공급> 항목> 내용> $의 t"에서 찾을 수 있습니다

오전 현재 Mootools의 작업

1.3

아이디어가 있으십니까? 감사. 바로 JS에서

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

멍청한 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');