Optimising Jquery: If href contains url from shortened links

Question

I am trying to avoid a potential problem when I want to highlight all shortened links within a page. At the moment I have this code:

        $('a').each(function() {

            var urlHref = $(this).attr('href');
            var shortenedLinks = ["bit.ly", "amzn.to","goo.gl","t.co","lnkd.in"];

            for (var item in shortenedLinks) {
                if (urlHref.includes(shortenedLinks[item])) {
                    console.log('yes');
                } else {
                    console.log('no');
                }
            }
        });

This works fine as the result in the console is:

yes

(4) no

The potential Problem

At the moment, for every link it runs through the array and compares part of the URL. This is fine for a small amount of URLS however I have about 80 URLshortener services, and what if the page contained 80 links that would be 6,400 checks.

I tried this with a few links on the page and all the shortened url providers and it took a while to go through them all.

Question

Is there a way to speed up this process so I can check the array and part of the url without looping through?

Answer 1

First some small tweaks, the break is the resource saver

// define the array more global, otherwise you set the array every call.
var shortenedLinks = ["bit.ly", "amzn.to","goo.gl","t.co","lnkd.in"];
$('a').each(function() {
    // use native JS where you can
    var urlHref = this.href // was: $(this).attr('href');


    for (var item in shortenedLinks) {
        // use starts with: https://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string
        if (urlHref.startsWith('http://'+shortenedLinks[item]) || urlHref.startsWith('https://'+shortenedLinks[item])) {
            console.log('yes');
            break; // we've found a match, stop looping <-- this is the biggest win
        } else {
            console.log('no');
        }
    }
});

You can improve this a little more by adding the http:// part in your array so you dont have to do them twice.

---

After that, you can also first check if it is an internal link. All internal links arent short urls, so you can skip those in one go, skipping the need to loop:

var shortenedLinks = ["bit.ly", "amzn.to","goo.gl","t.co","lnkd.in"];
function isHrefShorturl(elem){
    // <a href="/example"> is an internal link, continue
    if( elem.href.substr(0,1)!="/" ){
        for (var item in shortenedLinks) {
            // use starts with: https://stackoverflow.com/questions/646628/how-to-check-if-a-string-startswith-another-string
            if (elem.href.startsWith('http://'+shortenedLinks[item]) || elem.href.startsWith('https://'+shortenedLinks[item])) {
                return true; // when we find something, return true
            }
        }
    }
    return false; // fallback, return false if no matches
};

$('a').each(function() {
    if( isHrefShorturl(this) ){
        console.log('yes');
    } else {
        console.log('no');
    }
});

Answer 2

you can directly get the anchors with href starting with your string like

$( "a[href^='http://bit.ly']" ).each //do something
$( "a[href^='http://amzn.to']" ).each //do something

but to check 80 domains you would have to query the dom 80 times,so you could join the selectors into one

$( "a[href^='http://bit.ly'],a[href^='http://amzn.to']" ).each //do something

If,as you post says,you are just trying to highlight those links maybe you can just use the same selector but in css

a[href^="http://bit.ly"],a[href^='http://amzn.to'] {
    background: #ffff00;
}

EDIT: after some discussions and testing,looks like the vanilla javascript approach is the fastest in terms of perfomance if the browsers supports querySelectorAll.

document.querySelectorAll('a[href^="http://bit.ly"],a[href^="http://amzn.to"],a[href^="http://goo.gl"]').forEach(function(e){
  e.style.background='#ffff00';//highlights the link
});

jquery's attribute selector is probably the slower on older browsers

still,the css option(again,browser dependent) would be the very best for performance and dynamically added links