JSFiddle - React, Tailwind, and code Playground

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

$("a[href $='.pdf']" ).addClass("linkIconPDF");
    $("a[href *='.pdf#']").addClass("linkIconPDF");
    $("a[href *='.pdf;']").addClass("linkIconPDF");
    $("a[href *='.pdf?']").addClass("linkIconPDF");
 
    $("a[href $='.txt']" ).addClass("linkIconTXT");
    $("a[href *='.txt#']").addClass("linkIconTXT");
    $("a[href *='.txt;']").addClass("linkIconTXT");
    $("a[href *='.txt?']").addClass("linkIconTXT");