JSFiddle - React, Tailwind, and code Playground

by fallenturtle

HTML

<table>
  <tr class="webgrid-footer">
    <td colspan="6">
      <a data-swhglnk="true" href="/Consultant?page=1">First Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">Previous Page</a>
      <a data-swhglnk="true" href="/Consultant?page=2">1</a> 
      <a data-swhglnk="true" href="/Consultant?page=2">2</a> 
      <a data-swhglnk="true" href="/Consultant?page=3">3</a> 
      4
      <a data-swhglnk="true" href="/Consultant?page=5">5</a> 
      <a data-swhglnk="true" href="/Consultant?page=6">6</a> 
      <a data-swhglnk="true" href="/Consultant?page=5">Next Page</a> 
      <a data-swhglnk="true" href="/Consultant?page=15">Last Page</a>
    </td>
  </tr>
</table>

CSS

.current {
  color: red;
}

JavaScript

$(document).ready(function () {
	$(".webgrid-footer td").contents().not("a").wrap("<span class='current'></span>");
     $(".webgrid-footer a").each(function (index) {
        var page = $( this ).text();
        if (page.match(/^\d+$/)) {
            $(this).prepend("<span class='at-hide'>Page </span>");
        }; 
   });
   $(".current").prepend("<span class='at-hide'>Page </span>");
})