greasemonkey幫助（替換html標籤）

我是新來的greasemonkey，並希望學習使用它來刪除JavaScript執行者。像這樣的greasemonkey幫助（替換html標籤）

<span class="lazyload" style="display:block; width:100%;height:100%;" data-imgSrc="//img4.leboncoin.fr/ad-thumb/whatsoever.jpg" data-imgAlt="nevermind"></span>

應該讀

<img style="width:100%; height:100%;" src="http://img4.leboncoin.fr/ad-thumb/whatsoever.jpg" data-imgAlt="nevermind">

原則上，這可以通過一些搜索&內容替換來實現。在sed講

's|span class="lazyload" style="display:block;|img style="|gi' 
's|data-imgSrc="//|src="http://|gi'

做這項工作。

正如很多指出的（這裏例如RegEx match open tags except XHTML self-contained tags），這樣的替換可能是不好的。但是當應用於特定頁面時，它們很快...

謝謝！

來源

2016-11-05 Bernhard

在處理實時網頁時忘掉regexps，因爲直接替換HTML會通過addEventListener或.on屬性中斷附加在js代碼中的事件偵聽器（點擊處理程序等）。

下面是我正在使用的代碼的摘錄。

delazify(); 

// also delazify new dynamically added content 
new MutationObserver(delazify).observe(document, {subtree: true, childList: true}); 

function delazify() { 
    var lazies = document.getElementsByClassName('lazyload'); 
    for (var i = lazies.length; --i >= 0;) { 
     var el = lazies[i]; 
     var src = el.getAttribute('data-imgSrc'); 
     if (src) { 
      el.src = src; 
      el.removeAttribute('data-imgSrc'); 
      el.classList.remove('lazyload'); 
     } 
    } 
}

它很簡單，唯一值得一提的是，在MutationObserver回調，而不是通過變異記錄和添加的節點，它可以在很多節點的情況下是緩慢的循環，我直接用類名重複，因爲getElementsByClassName是非常快。

來源

2016-11-05 09:31:53 wOxxOm

greasemonkey幫助（替換html標籤）

回答

相關問題