greasemonkey help（htmlタグを置き換えてください）

Question

私はgreasemonkeyを初めて使用しています.JavaScript Enforcerを削除する方法を学びたいと思います。これは、いくつかの検索&置き換えによって行うことができる基本的には

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

をお読みください。この1

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

ように。 sed-speakで

'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）、 はそのような置換が悪い可能性があります。しかし、特定のページに適用すると、それらは迅速です。

ありがとう！

Answer 1

ライブWebページを扱うときは正規表現については忘れてください.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'); 
     } 
    } 
} 

それは、唯一の注目すべき事はgetElementsByClassNameがあるので、代わりにノードの多くの場合に遅くなることがあり突然変異レコードと追加したノード、をループのMutationObserverコールバックでは、私が直接クラス名で繰り返すことは本当に簡単ですです非常に高速です。