greasemonkey 帮助（替换 html 标签）

Question

我是 greasemonkey 的新手，想学习使用它来删除 javascript 执法者。喜欢这个

<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），这样的替换可能不好。但是当应用于特定页面时，它们很快...

谢谢！

Answer 1

在处理实时网页时忘记正则表达式，因为直接替换 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 回调中，我没有循环遍历突变记录和添加节点，这在节点很多的情况下可能会很慢，我直接通过 class name 进行迭代，因为getElementsByClassName 非常快。

greasemonkey 帮助（替换 html 标签）

greasemonkey help (replace html tags)

html

greasemonkey