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，修改包含圖像的錨標籤

回答

相關問題