Parsing a URL from a document and matching it from an array

Question

I need help in improving this script that I have written to parse a URL and check it from an array.

This is what I have done till now: (fiddle)

This is working fine. Was this done correctly? What exactly I need is to search URLs in a list (ul) (which will be a domain specific), and then match if the URL is found in an array (array will have 500+ domains). If it is found then I need to append some text.

Is this function fine to use if there is a long list of domain names in a document and an array has 100+ domains?

Should I use regex to get the domain or is finding it from a CSS selector a good idea?

<div id="links">
    <ul>
        <li>
            <a href="http://www.azaz.com">Link 1</a>
        </li>
        <li>
            <a href="http://www.azaz.info">Link 2</a>
        </li>
        <li>
            <a href="http://www.123.com">Link 3</a>
        </li>
        <li>
            <a href="http://www.566.com">Link 4</a>
        </li>
        <li>
            <a href="http://www.890.com">Link 5</a>
        </li>
        <li>
            <a href="http://www.azaz.com">Link 6</a>
        </li>
        <li>
            <a href="http://www.azaz.info">Link 7</a>
        </li>
        <li>
            <a href="http://www.123.com">Link 8</a>
        </li>
    </ul>
</div>



var arr = ['http://www.azaz.com', 'http://www.123.com'];
        $("#links li").each(function () {
        var aa = $(this).find('a').attr('href');
        var found = $.inArray(aa, arr) > -1;
        if(found === true){
            $(this).append("true");
        }
});

Answer 1

I agree that your solution is the right way to do what you want, but I would add that it can be a bit compressed for cleaner coding, like this:

var arr = ['http://www.azaz.com', 'http://www.123.com'];
$("#links li").each(function () {
    if( $.inArray($(this).find('a').attr('href'), arr) > -1) {
        $(this).append("true");
    }
});

This way we're using less statements and no variable at all but the code keeps easily readable.

Answer 2

Your code is simple and works, so I don't see any need to over-complicate things. It ofcourse depends on the sizes of the lists/data. But 500 doesn't seem so bad, performance wise.

It's good that you decided not to use regular expressions ([source])1 Using a CSS selector seems more appropriate. However it's prone to end up in errors if the site that provides the list changes its css.

In addition, I believe you have a small mistake with your indentation. Perhaps it's just a copy/paste error.

var arr = ['http://www.azaz.com', 'http://www.123.com'];
$("#links li").each(function () {
        var aa = $(this).find('a').attr('href');
        var found = $.inArray(aa, arr) > -1;
        if(found === true){
            $(this).append("true");
        }
});

instead of

var arr = ['http://www.azaz.com', 'http://www.123.com'];
        $("#links li").each(function () {
        var aa = $(this).find('a').attr('href');
        var found = $.inArray(aa, arr) > -1;
        if(found === true){
            $(this).append("true");
        }
});