Find last character with jQuery

Question

I have an HTML element which can contain plain text or other HTML elements:

<!-- plain text -->
<div class="content">
  SIMPLE TEXT.
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
    </tr>
  </table>
</div>

<!-- more html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML!</span>
  </div>
</div>

<!-- one more example -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML</span>!
  </div>
</div>

How can I append one more HTML element to the last printable character in my .content div, regardless of in which HTML element the character is?

Expected result:

<!-- plain text -->
<div class="content">
  SIMPLE TEXT.<span class="end"></span>
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b<span class="end"></span></td>
    </tr>
  </table>
</div>

<!-- more html elements -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML!<span class="end"></span></span>
  </div>
</div>

<!-- one more example -->
<div class="content">
  SIMPLE <span>TEXT.</span>
  <div>
    OTHER TEXT WITH MORE <span>HTML</span>!<span class="end"></span>
  </div>
</div>

Answer 1

Here is my approach to solve this issue, the JQuery line by line and later the snippet example.

• First loop trough each .content element:

  $('.content').each(function(){
  

• Then store in a var which is the last character:

  var ch = $(this).text().trim().slice(-1);
  

• Now since sometimes the last character can be just in a textNode and not inside a children of .content we need to differentiate this condition, we can identify the last nodeText children and the actual last element.

  var lastnode = $(this).contents().last();
  var textnode = $(this).contents().filter(function(){
    return this.nodeType === 3 && $.trim(this.nodeValue) !== '';;
  }).last();
  

• Finally if the last children is a textNode we just need to append() the element to the .content parent, otherway find the last element that :contains our stored character and do the append():

$('.content').each(function(){
  var ch = $(this).text().trim().slice(-1);
  var lastnode = $(this).contents().last();
  var textnode = $(this).contents().filter(function(){
    return this.nodeType === 3 && $.trim(this.nodeValue) !== '';;
  }).last();
  
  if (lastnode[0] == textnode[0]) {
    $(this).append('<span class="end"></span>')
  } else {
    $(this).find(":contains('"+ch+"')").last().append('<span class="end"></span>')
  }
})

.end {
  width: 10px;
  height: 10px;
  margin:0 5px;
  background: purple;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- plain text -->
<div class="content">
  SIMPLE TEXT.
</div>

<!-- or other html elements -->
<div class="content">
  SIMPLE<span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>b</td>
      <td>b</td>
    </tr>
  </table>
</div>