JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<p>example.com/page1</p>
<p>example.com/page1/</p>
<p>example.com/page2</p>
<p>example.com/page2/</p>
<button>Run</button>

CSS

html {
    font:14px sans-serif;
}
button {
    padding:5px 15px;
}
.highlight {
    background: #FFA;
}

JavaScript

function lastUrlChunk(str) {
    var arr = str.split("/");
    return arr[arr.length-1].trim() != '' ? arr[arr.length-1] : arr[arr.length-2];
}
$("button").on("click", function() {
    var txt;
    $("p").each(function() {
        txt = $(this).html();
        $(this).html( txt.replace(lastUrlChunk(txt), '<span class="highlight">'+lastUrlChunk(txt)+'</span>') );
    });
});