CODEWITHSUNDEEP
htmlcss
mowx
mowx

Reputation: 77

How to only change the last digits color of a number?

As you know the data will be changeable. So, I would like to know how can I change the color of all last digits of a number only if there is a zero in the end or more. for Example: 0.50 will be 0.50. 10.00 = 10.00. 10,000.00 = 10,000.00. 100,050.00 = 100,050.00 and so on. Thanks and any help would be greatly appreciated.

.num{
  color: black;
  font-size: 22px;
  font-family: sans-serif;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

Upvotes: 1

Views: 462

Answers (4)

Mamun
Mamun

Reputation: 68933

You have to do some kind of DOM manipulation to make the styling. You can try the following way:

var nums = document.querySelectorAll('.num');
nums.forEach(function(n){
  var s =  n.textContent.split(/[,.0]+$/);
  var m = n.textContent.match(/[,.0]+$/);
  if(s && m && s.length > 0 && m.length > 0){
    n.innerHTML = s[0] + '<span class=numStyle>'+m[0]+'</span>';
  }
});
.num{
  color: black;
  font-size: 22px;
  font-family: sans-serif;
}
.numStyle{
  font-weight: bold;
  opacity: 0.5;
  color: red;
}
<div class="num">1.5</div>
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15223

I gave two solutions, using method forEach(). With wrapping in a span tag with a class and in a strong tag.

I tried not to use variables inside the loop, in order for you to better understand how my code works.

let num = document.querySelectorAll(".num");

num.forEach(function(num_curr) {
    num_curr.innerHTML = num_curr.textContent.replace(/.$/, '<span class="last-letter">' + num_curr.textContent[num_curr.textContent.length - 1] + "</span>");
});
.num {
    color: black;
    font-size: 22px;
    font-family: sans-serif;
}

.last-letter {
    font-weight: bold;
    color: green;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

This is a solution without a span tag with a class. The last character is wrapped in a strong tag, which makes the character bold.

let num = document.querySelectorAll(".num");

num.forEach(function(num_curr) {
    num_curr.innerHTML = num_curr.textContent.replace(/.$/, '<strong>' + num_curr.textContent[num_curr.textContent.length - 1] + "</strong>");
});
.num {
    color: black;
    font-size: 22px;
    font-family: sans-serif;
}
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

Upvotes: 1

Ezequiel S. Sandoval
Ezequiel S. Sandoval

Reputation: 170

Using JS and the power of IIFE's you can do as follows:

(() => {
  // Get all items
  const items = document.getElementsByClassName('num');
  // Iterate over those items to get text of each one
  for (const item of items) {
    const length = item.innerText.length;
    const text = item.innerText;
    let digits = 0;
    // Iterate from end to start, you can access strings characters as it
    // were an array, so if it finds anything that's not a
    // comma, dot or zero, it will break the loop
    for (var i = (length - 1); i >= 0; i--) {
        if (text[i] === '0'
        || text[i] === '.'
        || text[i] === ','
        ) {
        // Increment digits so you know hoy many yo have to change
        digits++; 
      } else {
        break;
      }
    }
    // innerHTML to each one of your items
    // the first part is to print normal substring
    // second part prints from where you stopped to the end
    item.innerHTML = `${text.substring(0, length-digits)}<b>${text.substring(length-digits, length)}</b>`
  }
})();
<div class="num">0.50</div>
<div class="num">10.00</div>
<div class="num">10,000.00</div>
<div class="num">100,050.00</div>

Upvotes: 1

Bharath S
Bharath S

Reputation: 374

USING REGEX

function zeroHighligherWithRegex(str) {
  var res = str.split(/(0(?:\n|\t|\s|0|,|\.)*)$/);
  return res[0] + `<span class="highlight">${res[1]}</span>`;
}

WITHOUT USING REGEX

  1. Find the last repeating zero list including . and ,
  2. wrapping zero list in span
  3. return the required number

zero highligher function

function zeroHighligher(textContent) {

  let num = textContent;
  let charList = num.split('');


  let isContinuos = true;
  let nonZeroNumList = [];
  let zeroList = charList.reverse().map(num => {
      if(isContinuos && (num === '0' || num === '.' || num === ',')) {
          return num;
      } else {
          isContinuos = false;
          nonZeroNumList.push(num);
      }
  });
  let zeroNumString = zeroList.reverse().join('');
  let nonZeroNumString = nonZeroNumList.reverse().join('');

  const outputString = nonZeroNumString + `<span class="highlight">${zeroNumString}</span>`

  return outputString;
}

to loop all the div elements

document.querySelectorAll('.num').forEach(elm => {
  elm.innerHTML = zeroHighligherWithRegex(elm.textContent)
})

CSS

span.highlight {
  font-weight: bolder;
}

Outputs

0.50

10.00

10,000.00

100,050.00

Demo

Upvotes: 1

Related Questions