Use JQuery to hide text at the start of a string

Question

I have a piece of web-hosted software in which I need to expose some sort of sorting value at the start of my string to make the items appear in the correct order. The software will automatically sort the values alphabetically so I've calculated a sorting value and the outputs now sort nicely by age order like this:

• 001 Years Old David
• 033 Years Old Annabelle
• 055 Years Old Carol
• 065 Years Old Bill

I want to allow the software to sort the values using these values but then I would like the browser to only actually display the name of the person:

• David
• Annabelle
• Carol
• Bill

I am wondering if I could write a script in JQuery that listens for the text that contains " Years Old " and then strips the first 14 characters out of the display, e.g. something like

$(".DIV:contains(' Years Old ')").html(
  //Here I would like to show only the text after the first 14 characters
);

If anyone has any ideas on how to achieve the above or has a better idea for how to achieve it then I would really appreciate the input!

Answer 1

To remove the first 14 characters from the div text you can provide a function to text() which accepts the current text value as an argument. Then you can use substring() to remove the first N characters and return the result to update the element. Try this:

$('div').text((i, t) => t.substring(14));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>001 Years Old David</div>
<div>033 Years Old Annabelle</div>
<div>055 Years Old Carol</div>
<div>065 Years Old Bill</div>

However it's worth noting that this is not an optimal solution. A better approach, assuming it's possible, would be for you to place the ordering index in to a data attribute on the div. Then you can simply order by that and not have to worry about amending the text afterwards. Something like this:

$('#container div').sort((a, b)  => $(a).data('order') < $(b).data('order') ? -1 : 1).appendTo('#container');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div data-order="65">Bill</div>
  <div data-order="55">Carol</div>
  <div data-order="1">David</div>
  <div data-order="33">Annabelle</div>
</div>

Answer 2

You can use use split() with pop().

$('div').text((index, value) => value.split(' ').pop());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>001 Years Old David</div>
<div>033 Years Old Annabelle</div>
<div>055 Years Old Carol</div>
<div>065 Years Old Bill</div>

Alternative use Regex.

$('div').each(function(i, v) {
  let strings = $(this).text();
  let regex = /^((\S+)\s){3}(.+)/gi;
  let match = regex.exec(strings);
  $(this).text(match[3]);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>001 Years Old David</div>
<div>033 Years Old Annabelle</div>
<div>055 Years Old Carol</div>
<div>065 Years Old Bill</div>

Answer 3

idk what app that you using for,

if in web ex.html

substring(0, 14);
substring(start, end);

hope answer your question

Answer 4

Version using span

$('ul li')
  .detach()
  .sort((a, b) =>  $(a).text() < $(b).text() ? -1 : 1)
  .appendTo('ul');

.age { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><span class="age">055</span>Carol</li>
  <li><span class="age">001</span>David</li>
  <li><span class="age">065</span>Bill</li>
  <li><span class="age">033</span>Annabelle</li>
</ul>

Version using data attr

$('ul li')
  .detach()
  .sort((a, b) =>  $(a).data("age") < $(b).data("age") ? -1 : 1)
  .appendTo('ul');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li data-age="055">Carol</li>
  <li data-age="001">David</li>
  <li data-age="065">Bill</li>
  <li data-age="033">Annabelle</li>
</ul>