JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<pre><a href="https://the-eye.eu/public/">../</a>
<a href="A%20Message%20From%20Akira%20Kurosawa/">A Message From Akira Kurosawa/</a>                     28-Apr-2018 16:27       -
<a href="Archive_of_SCW_combat_footage/">Archive_of_SCW_combat_footage/</a>                     17-May-2018 17:22       -
<a href="CD3WD/">CD3WD/</a>                                             21-Dec-2017 07:52       -
<a href="Cinematic%20Magazine%20Slideshow/">Cinematic Magazine Slideshow/</a>                      28-Apr-2018 16:27       -
<a href="Data_Mans_Ramblings_Podcast/">Data_Mans_Ramblings_Podcast/</a>                       22-Feb-2018 15:57       -
<a href="Deepfakes%20Fakeapp%202/">Deepfakes Fakeapp 2/</a>                               28-Apr-2018 16:30       -
<a href="FCC/">FCC/</a>                                               14-Dec-2017 21:28       -
<a href="Firefox_Marketplace_2018_03_Capture/">Firefox_Marketplace_2018_03_Capture/</a>               08-Mar-2018 19:40       -
<a href="Linda%20J.%20Cowgill%20-%20Writing%20Short%20Films/">Linda J. Cowgill - Writing Short Films/</a>            28-Apr-2018 16:27       -
<a href="Movie_Posters/">Movie_Posters/</a>                                     05-Jul-2018 05:58       -
<a href="PS4_4.50_SDK_Offline_Installer/">PS4_4.50_SDK_Offline_Installer/</a>                    28-May-2018 17:15       -
<a href="Pimsleur%20Language%20Pack/">Pimsleur Language Pack/</a>                            14-Feb-2018 21:04       -
<a href="Private%20Label%20Articles/">Private Label Articles/</a>                            22-Feb-2018 16:16       -
<a href="Randomer/">Randomer/</a>                                          07-Jun-2018 21:15       -
<a href="WordList%20Collection/">WordList Collection/</a>                               16-Feb-2018 22:13       -
<a href="audiobookbay.nl/">audiobookbay.nl/</a>                                   26-Nov-2017 18:53       -
<a href="bitcoin-satoshi/">bitcoin-satoshi/</a>                                ...

CSS

span {
    background: red;
}

JavaScript

$('pre').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    $(this).replaceWith( $(this).text().replace(/([0-9]{1,2}-[a-zA-Z]{3}-[0-9]{4} [0-9]{2}:[0-9]{2})/g, '<span class="date-time">$1</span>') );
});

$('pre').contents().filter(function() {
    return this.nodeType === 3;
}).each(function() {
    $(this).replaceWith( $(this).text().replace(/([0-9-].*)/, '<span class="file-size">$1</span>') );
});