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().filter(function() {
      if (this.nodeType === 3)
         return this; //Node.TEXT_NODE
      })
  .each(function(index) {
    var page = $(this).text();
    if (page.match(/\d+/)) {
       $(this).replaceWith("<span class='current'> <span class='at-hide'>Page "+page+"</span></span>");
    }
  })
  
  $(".webgrid-footer a").each(function (index) {
    var page = $( this ).text();
    if (page.match(/^\d+$/)) {
        $(this).prepend("<span class='at-hide'>Page </span>");
    }; 
  });
})