Change style of the last two characters of the string

Question

Considering:

strong {font-size: 36px}

    <div id="conteiner">
       <div class="meu-valor">
          <strong>125,74</strong>
       </div>
        
       <div class="meu-valor">
          <strong>125,54</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,84</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,90</strong>
       </div>
    
       <div class="meu-valor">
          <strong>126,65</strong>
       </div>
    </div>

How could I change only the style of the last three characters of the string between the Strong tag? This using javascript, jquery or css...

Thanks for your help!

Answer 1

You can use it like this:

document.querySelectorAll('.meu-valor strong').forEach(el => {
  const [int, dec] = el.textContent.trim().split(',');
  el.outerHTML = `<span>${int}<strong>,${dec}</strong></span>`;
});

What this does is replace the HTML of this strong as you see in the template string. So, knowing all the strong you want to change, you can replace one by one.

document.querySelectorAll('.meu-valor strong').forEach(el => {
  const [int, dec] = el.textContent.trim().split(',');
  el.outerHTML = `<span>${int}<strong>,${dec}</strong></span>`;
});

strong {
  font-size: 36px
}

<div id="conteiner">
  <div class="meu-valor">
    <strong>125,74</strong>
  </div>

  <div class="meu-valor">
    <strong>125,54</strong>
  </div>

  <div class="meu-valor">
    <strong>125,84</strong>
  </div>

  <div class="meu-valor">
    <strong>125,90</strong>
  </div>

  <div class="meu-valor">
    <strong>126,65</strong>
  </div>
</div>

Answer 2

Here is an example using Jquery. It will take the content inside Strong and create a new HTML. In the example, a font tag was applied to change the color of the last 3 characters.

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>
<style type="text/css">  
strong {font-size: 36px}
</style>
<div id="conteiner">
       <div class="meu-valor">
          <strong>125,74</strong>
       </div>
        
       <div class="meu-valor">
          <strong>125,54</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,84</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,90</strong>
       </div>
    
       <div class="meu-valor">
          <strong>126,65</strong>
       </div>
    </div>
	
<script type="text/javascript">
$( document ).ready(function() { 
   $('strong').html(function(idx, oldHtml) {
    var startStr = oldHtml.substring(0, oldHtml.length - 3);
    var endStr = '<font color=#FF0000>' + oldHtml.substring(oldHtml.length - 3) + '</font>'
    return startStr + endStr;

});
});

</script>

Answer 3

Use a jQuery function

An example of jQuery function to change the CSS style of the last X characters within a given HTML tag.

// tagName é o nome da tag html que você quer mudar
// classNames é uma string com todas as classes CSS que serão aplicadas aos caracteres
// howMuch é o número de caracteres do final da tag que vestirão as classNames
function modifyLastChars(tagName = 'strong', classNames = '', howMuch = 0) {

    $(tagName).each((index, element) => {
        let content = $(element).text().trim();
        let breakPoint = content.length - howMuch;
        let initialCaracters = content.substring(0, breakPoint);
        let lastCaracters = content.substring(breakPoint);

        $(element).html(
            initialCaracters +
            '<span class="' + classNames + '">' +
                lastCaracters +
            '</span>'
        );
    });
}

How to use

$(document).ready(() => {
    modifyLastChars('strong', 'uma-classe-css outra-classe-css', 2);
});

This usage example will put the chosen css classes in the last two characters (the two numbers after the comma) of all Strong tags in your HTML.