Clever Geek Handbook

Find last character using jQuery

I have an HTML element that 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 do I add another HTML element to the last printable character in a div .content

, regardless of which HTML element has the character in?

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


source to share


5 answers


Here is my approach for solving this problem, jQuery line by line and then a snippet example.

  • First loop through each item .content

    :

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

  • Then store in var which is the last character:

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

  • Now, since sometimes the last character can only be in the textNode and not inside the children .content

    , we need to differentiate this condition, we can identify the last child nodes of the nodeText 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 are textNode, we just need to append()

    highlight the .content element , otherwise find the last element, which is :contains

    our saved character, and do 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>
Run codeHide result


+1


source


Restart the element to get the last node text

https://jsfiddle.net/30ezoyau/

<div id="content">
  SIMPLE <span>TEXT.</span>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>a</td>
      <td id="last">b</td>
    </tr>
  </table>
</div>


Js

// get your root element
const tree = document.querySelector('#content')

// flatten your tree into a list, then pop it to get last text node
const walk = (node = {}, list = []) => {
  // assuming you want the text node parent node, not the text node itself
  if (/\w{1,}/i.test(node.textContent || '') && node.nodeName !== '#text')
    list.push(node)
  if (node.childNodes) {
    return [...node.childNodes].reduce((acc, child, i) => {
      const branch = walk(child, acc)
      return [...acc, ...branch]
    }, [])
  } else {
    return list
  }
}

// walk through tree to get last non-empty text node
const lastString = walk(tree).pop()

// append it
lastString.innerHTML = lastString.innerHTML + `<b> is last</b>`

// test
console.assert(
  document.getElementById('last').innerHTML === 'b<b> is last</b>',
  'should append span to last text'
)
+1


source


to find the last text you need a recursive function like this

function getLastText(element) {
  if (!element) return null;
  if (element.childNodes && element.childNodes.length > 0) {
    //alert('loop');
    for (var i = element.childNodes.length - 1; i >= 0; i++) {
      var glt = getLastText(element.childNodes[i]);
      if (glt != null) {
        return glt;
      }
    }
  }
  if (element.textContent && element.textContent.length > 0) {
    return element;
  }
  return null;
}

This will return the last element containing the text contained within the element in the initial call to getLastText

0


source 


$('.content :last').append("<span class='end'></span>");
-1


source


Old answer

<s> Another way is to use appendTo ()

$("<span class="end"></span>").appendTo(".content");

This will add an element just before the closing tag of anything that has a .content tag. C>

New answer

Not the most elegant solution, but it does what you wanted

<script>
  //Loop each DOM element with a content class
  $(".content").each(function() {
    //Find out what the last Text Character is in the DOM Element
    //and use regex to determine the last position in the inner HTML
    //(Regex excludes tags)
    var positionToInsert = $(this).html().search("(?![^<]*>)" + 
         $(this).text().trim().charAt($(this).text().trim().length-1))+1;

    //Insert the <span> tag at the correct position and save to string 
    var newHtml = [$(this).html().slice(0, positionToInsert), 
                    "<span class='end'></span>",                                                                 
                    $(this).html().slice(positionToInsert)].join('');

    //Reset the HTML for the DOM element to the new string
    $(this).html(newHtml);
  });
</script>
-2


source






More articles:


All Articles