JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

PDF:
<ul>
    <li><a href="http://example.com/file.pdf">file.pdf</a></li>
    <li><a href="http://example.com/file.pdf;session">file.pdf;session</a></li>
    <li><a href="http://example.com/file.pdf#anchor">file.pdf#anchor</a></li>
    <li><a href="http://example.com/file.pdf?foo=bar">file.pdf?foo=bar</a></li>
</ul>

TXT:
<ul>
    <li><a href="http://example.com/file.txt">file.txt</a></li>
    <li><a href="http://example.com/file.txt;session">file.txt;session</a></li>
    <li><a href="http://example.com/file.txt#anchor">file.txt#anchor</a></li>
    <li><a href="http://example.com/file.txt?foo=bar">file.txt?foo=bar</a></li>
</ul>

CSS

a.linkIconpdf {
    /* some PDF background icon */
    color:orange
}

a.linkIcontxt {
    /* some TXT background icon */
    color:green
}

JavaScript

//add class based on filetype - should work globally

$("a").each(function(){
    var match = this.href.match(/\.([a-zA-Z0-9]{2,4})([#;\?]|$)/);
    console.log(match);
    if(match){
        $(this).addClass("linkIcon" + match[1]);
    }
});