greasemonkey help (html 태그 바꾸기)

Question

greasemonkey를 처음 사용하여 자바 스크립트 실행자를 제거하는 방법을 배우고 싶습니다. 이 하나

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

HTML을 직접 바꾸면 addEventListener 또는 .on 속성을 통해 js 코드에 첨부 된 이벤트 리스너 (클릭 핸들러 등)가 중단되므로 라이브 웹 페이지를 처리 ​​할 때 regexps를 잊어 버릴 수 있습니다.

다음은 내가 사용중인 코드에서 발췌 한 것입니다.

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 콜백에서, 내가 직접 클래스 이름을 반복 정말 간단 있어요 매우 빠릅니다.