JSFiddle - React, Tailwind, and code Playground

by evanmoore

HTML

Non-breaking space is getting selected instead of my pagination
<BR>
<BR>
<div class="pag">	<a class="prev" href="http://www.example.com">‹‹</a>
	<a href="http://www.example.com">1</a>

  <a
  href="http://www.example.com">2</a>	<a href="http://www.example.com">3</a>
	<a href="http://www.example.com">4</a>

    <a
    href="http://www.example.com">5</a>	<a href="http://www.example.com">6</a>
&nbsp;7&nbsp; xx records / xx records per
      page / x pages</div>
<BR>
<hr>
<BR>Non-breaking space is getting selected instead of my pagination
<BR>
<BR>
<div class="pag">	<a class="prev" href="http://www.example.com">‹‹</a>
	<a href="http://www.example.com">1</a>

  <a
  href="http://www.example.com">2</a>	<a href="http://www.example.com">3</a>
	<a href="http://www.example.com">4</a>
&nbsp;5&nbsp;
    <a
    href="http://www.example.com">6</a>	<a href="http://www.example.com">7</a>
	<a class="prev" href="http://www.example.com">››</a>
xx
      records / xx records per page / x pages</div>
<HR>

CSS

.pag {
  padding:10px 10px;
}
.pag a {
  background-color: #EBEBEB;
  border: 1px solid gray;
  color: #333333;
  font-weight: bold;
  margin-right: 3px;
  padding: 3px 9px;
  text-decoration: none;
}
.pag span {
  background-color: blue;
  border: 1px solid gray;
  color: white;
  font-weight: bold;
  margin-right: 3px;
  padding: 3px 9px;
  text-decoration: none;
}

JavaScript

$('.pag').each(function () {
  $(this).contents().filter(function () {
    return this.nodeType === 3 && $.trim(this.textContent) !== '' 
  }).first().wrap('<div/>').parent().html(function (i, v) {
        return v.replace(/(\w)/, '<span>$1</span>')
      }).replaceWith(function () {
        return this.innerHTML;
      })
})