Using .contents() with .not() to only target text and not children (or how I'm trying to make webgrid pager's screen reader friendly)

Question

I'm trying to make the .net webgrid footer screen reader friendly. Currently the code looks like this:

  <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>

But I want it to look like this:

  <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"><span class="at-hide">Page </span>1</a> 
      <a data-swhglnk="true" href="/Consultant?page=2"><span class="at-hide">Page </span>2</a> 
      <a data-swhglnk="true" href="/Consultant?page=3"><span class="at-hide">Page </span>3</a> 
      <span class="current"><span class="at-hide">Page </span>4</span>
      <a data-swhglnk="true" href="/Consultant?page=5"><span class="at-hide">Page </span>5</a> 
      <a data-swhglnk="true" href="/Consultant?page=6"><span class="at-hide">Page </span>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>

The goals being to: - Preface each page number with the word "Page" wrapped in a span that will be used with CSS to hide the word from sighted users. - Wrap the current page in an element so I can target it along with the s to give them padding via CSS.

Since it's .net I don't really have a way to edit the markup directly so I'm doing it through jquery, or at least trying to. I've gotten as far as getting it to append Page to the beginning of the text that is within s.

What's giving me trouble is the fact that the current page isn't wrapped in anything, so I'm having trouble properly targeting it.

Currently my script looks like this:

    $(".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>");

I thought I was getting somewhere using .contents() but when I tried to specify it not wrap anchors it just stopped working all together.

I've gotten to the hair pulling part of this task, so any help would be appreciated. Thanks!

I have this in a fiddle here: http://jsfiddle.net/fallenturtle/p6n4ar57/3/

Answer 1

A coworker of mine was able to help me figure this out and I wanted to share the solution for anyone who also has this issue:

  $(".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>");
    }; 
  });

Here's the fiddlepen for anyone interested: http://jsfiddle.net/fallenturtle/p6n4ar57/9/

Answer 2

here a way to wrap textNode :

<script>
    function getTextNodesIn(node, includeWhitespaceNodes) {
      var textNodes = [], nonWhitespaceMatcher = /\S/;

      function getTextNodes(node) {
          if (node.nodeType == 3) {
              if (includeWhitespaceNodes || nonWhitespaceMatcher.test(node.nodeValue)) {
                  textNodes.push(node);
              }
          } else {
              for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                  getTextNodes(node.childNodes[i]);
              }
          }
      }

      getTextNodes(node);
      return textNodes;
  }

  $(getTextNodesIn(document.body)).wrap('<span/>');

source: How do I select text nodes with jQuery?