How to select tag "a" has a specific file type in href using jQuery?

Question

I am targeting links containing various types of files in jQuery using:

jQuery('a[href$=".pdf"], a[href$=".doc"], a[href$=".docx"], a[href$=".ppt"], a[href$=".pptx"], a[href$=".xls"], a[href$=".slxs"], a[href$=".epub"], a[href$=".odp"], a[href$=".ods"], a[href$=".txt"], a[href$=".rtf"]').before('<span class="glyphicon glyphicon-file"></span> ');

Firstly, is there a way to reduce recurrence? eg.

jQuery('a[href$=".pdf|.doc|.docx"])

And secondly, is there a way to configure various cases for file extensions, for example. Pdf, Pdfand Pdf?

Answer 1

You can filter the selected item using .filter(). In the filter function test function, use regex in String.prototype.match().

$("a").filter(function(){
   return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|slxs|epub|odp|ods|txt|rtf)$/i);
}).before("Some html");

$("a").filter(function(){
  return $(this).attr("href").match(/\.(pdf|doc|docx|ppt|pptx|xls|slxs|epub|odp|ods|txt|rtf)$/i);
}).css("color", "red")

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="file.pdf">pdf</a>
<a href="file.doc">doc</a>
<a href="file.html">html</a>
<a href="file.docx">docx</a>
<a href="file.ppt">ppt</a>
<a href="file.php">php</a>
<a href="file.slxs">slxs</a>
<a href="file.txt">txt</a>

Run code

Note that the flag iat the end of the regular expression is not case sensitive.

Answer 2

CSS, .

    jQuery.expr[':'].hrefEndsWith = function(
        objNode,
        intStackIndex,
        arrProperties,
        arrNodeStack
        ){
        // The list of arguments gets passed as a string -
        var arrArguments = arrProperties.split(',');
        // Create a jQuery version of this node.
        var jThis = $( objNode );
        // Check to see if this node ends with (we only need to find
        // one of the titles to qualify).
        for (var i = 0 ; i < arrArguments.length ; i++){
            // Check for title equality.
            if (jThis.attr( "href" ).endsWith(arrArguments[i])){
                // We found a href match, return true to
                // indicate that this node should be included
                // in the returned jQuery stack.
                return true ;
            }
        }
        // If we have made it this far, then we found no
        // match. Return false to indicate that this node
        // did not match our selector.
        return false ;
    }

    // Use it
    jQuery("a:hrefEndsWith('.pdf', '.txt', '.xls')");

, , JS-, .

function getEndsWithSelector(names) {
    return names.map(n => 'a[href$=".'+name+'"]').join();
}

jQuery(getEndsWithSelector('pdf', 'txt', 'xls'))

,