Is there a way to specifically modify the color of the last digits in a number?

Question

Is there a way to specifically modify the color of the last digits in a number?

Seeking guidance on changing the color of the last digits of a number if it ends in a zero or more. For instance, transform 0.50 to 0.50, 10.00 to 10.00, 10,000.00 to 10,000.00, 100,050.00 to 100,050.00, and the like. Any assistance in achieving this would be highly 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>

html css

Answer 1

Answer №1

To achieve the desired styling, you will need to perform DOM manipulation. Here is a suggested approach:

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>

Answer 2

To achieve the desired styling, you will need to perform DOM manipulation. Here is a suggested approach:

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>

Answer 3

Answer №2

USING REGEX

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

WITHOUT USING REGEX

Identify the last sequence of repeating zeros including . and ,
Enclose the zero sequence in a span element
Return the modified number

Zero highlighter function

function highlightZeroesWithoutRegex(textContent) {

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


  let isContinuous = true;
  let nonZeroNumList = [];
  let zeroList = charList.reverse().map(num => {
      if(isContinuous && (num === '0' || num === '.' || num === ',')) {
          return num;
      } else {
          isContinuous = 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 iterate through all the div elements

document.querySelectorAll('.num').forEach(element => {
  element.innerHTML = highlightZeroesWithRegex(element.textContent)
})

CSS

span.highlight {
  font-weight: bolder;
}

Outputs

0.50

10.00

10,000.00

100,050.00

Demo

Answer 4

USING REGEX

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

WITHOUT USING REGEX

Identify the last sequence of repeating zeros including . and ,
Enclose the zero sequence in a span element
Return the modified number

Zero highlighter function

function highlightZeroesWithoutRegex(textContent) {

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


  let isContinuous = true;
  let nonZeroNumList = [];
  let zeroList = charList.reverse().map(num => {
      if(isContinuous && (num === '0' || num === '.' || num === ',')) {
          return num;
      } else {
          isContinuous = 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 iterate through all the div elements

document.querySelectorAll('.num').forEach(element => {
  element.innerHTML = highlightZeroesWithRegex(element.textContent)
})

CSS

span.highlight {
  font-weight: bolder;
}

Outputs

0.50

10.00

10,000.00

100,050.00

Demo

Answer 5

Answer №3

By utilizing JS and the concept of IIFE's, you can achieve the following:

(() => {
  // Access all elements with class 'num'
  const items = document.getElementsByClassName('num');
  // Loop through each item to extract its text content
  for (const item of items) {
    const length = item.innerText.length;
    const text = item.innerText;
    let digits = 0;
    // Iterate backwards, stopping at first non-zero, non-period, non-comma character
    for (var i = (length - 1); i >= 0; i--) {
        if (text[i] === '0'
        || text[i] === '.'
        || text[i] === ','
        ) {
        digits++; // Count how many characters need to be styled differently
      } else {
        break;
      }
    }
    // Modify the HTML content of each item
    // The first part displays the normal text
    // The second part highlights the characters that need styling
    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>

Answer 6

By utilizing JS and the concept of IIFE's, you can achieve the following:

(() => {
  // Access all elements with class 'num'
  const items = document.getElementsByClassName('num');
  // Loop through each item to extract its text content
  for (const item of items) {
    const length = item.innerText.length;
    const text = item.innerText;
    let digits = 0;
    // Iterate backwards, stopping at first non-zero, non-period, non-comma character
    for (var i = (length - 1); i >= 0; i--) {
        if (text[i] === '0'
        || text[i] === '.'
        || text[i] === ','
        ) {
        digits++; // Count how many characters need to be styled differently
      } else {
        break;
      }
    }
    // Modify the HTML content of each item
    // The first part displays the normal text
    // The second part highlights the characters that need styling
    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>

Answer 7

Answer №4

I provided two solutions utilizing the forEach() method. One involves enclosing the last character in a span tag with a specific class, while the other wraps it in a strong tag.

I made a conscious effort to avoid using variables within the loop to ensure clarity on how the code functions.

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

numbers.forEach(function(currNum) {
    currNum.innerHTML = currNum.textContent.replace(/.$/, '<span class="last-letter">' + currNum.textContent[currNum.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 second solution does not involve a span tag with a class. Instead, the last character is enclosed in a strong tag, emphasizing its bold appearance.

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

numbers.forEach(function(currNum) {
    currNum.innerHTML = currNum.textContent.replace(/.$/, '<strong>' + currNum.textContent[currNum.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>

Answer 8

I provided two solutions utilizing the forEach() method. One involves enclosing the last character in a span tag with a specific class, while the other wraps it in a strong tag.

I made a conscious effort to avoid using variables within the loop to ensure clarity on how the code functions.

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

numbers.forEach(function(currNum) {
    currNum.innerHTML = currNum.textContent.replace(/.$/, '<span class="last-letter">' + currNum.textContent[currNum.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 second solution does not involve a span tag with a class. Instead, the last character is enclosed in a strong tag, emphasizing its bold appearance.

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

numbers.forEach(function(currNum) {
    currNum.innerHTML = currNum.textContent.replace(/.$/, '<strong>' + currNum.textContent[currNum.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>

Is there a way to specifically modify the color of the last digits in a number?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to retrieve HTML code from a webpage using its URL address

The wells are surpassing the line

Shifting a div from side to side

Guide to modify target blank setting in Internet Explorer 8

Having issues with my JavaScript timer - seeking assistance in troubleshooting the problem

Start fresh with the count for every individual table

Ensures that two divs have the same dimensions

Inline-block divs styled with CSS3 are causing a white gap to appear at the top of

Constructing an HTML table with PHP echoes

Utilize CSS for Sticky Headers to Create Full Page Scrollbars for Table Control

Is it frowned upon or considered incorrect to achieve a horizontally centered page by adjusting the CSS properties of the html tag?

Is utilizing the bootstrap grid system to create nested rows a viable option?

Enhancing the Appearance of MUI Date Calendar

How to iterate and apply styles to properties of objects in an array using Vue.js?

Adjust the size of the logo as the user scrolls

Show a virtual numeric keypad on the HTML input fields when they are set as type text specifically for mobile devices in a unique situation

Effortless navigation through the document in both directions with seamless scrolling

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

What is the smoothest way to animate price changes as you scroll?

Reveal and conceal using CSS animations