CODEWITHSUNDEEP
htmlgreasemonkey
Bernhard
Bernhard

Reputation: 3

greasemonkey help (replace html tags)

I am new to greasemonkey and would like to learn to use it to remove javascript enforcers. Like this one

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

that should read

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

In principle this can be done by some search&replaces. In sed-speak

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

does the job.

As pointed out a lot, (here for example RegEx match open tags except XHTML self-contained tags), such replacements may be bad. But when applied to a specific page they are quick ...

thank you!

Upvotes: 0

Views: 243

Answers (1)

woxxom
woxxom

Reputation: 73556

Forget about regexps when dealing with live web pages because replacing HTML directly will break event listeners (click handlers etc.) attached in js code via addEventListener or .on properties.

Here's an excerpt from the code I'm using.

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');
        }
    }
}

It's really simple, the only noteworthy thing is that in MutationObserver callback instead of looping through mutation records and added nodes, which may be slow in case of lots of nodes, I directly iterate by class name because getElementsByClassName is extremely fast.

Upvotes: 1

Related Questions