Formatting of large numerical values with jQuery

Question

Formatting of large numerical values with jQuery

I have a huge table with numbers and other data. I want to color the large numbers based on their value in decimal, hundreds, thousands, and millions.

For example:

<tr>
   <td class="numColour">20,000,365.00 ISK</td>
   <td class="numColour">2,467,218,928.46 ISK</td>
   <td class="numColour">498,356.65 ISK</td>
</tr>

All the numbers are in a TD class=numColour. I want to format them like this:

<tr>
   <td class="numColour"><span class="red">20</span>,<span class="blue">000</span>,<span class="green">365</span>.<span class="white">00</span> ISK</td>
   <td class="numColour"><span class="yellow">2</span>,<span class="red">467</span>,<span class="blue">218</span>,<span class="green">928</span>.<span class=white">46</span> ISK</td>
   <td class="numColour"><span class="blue">498</span>,<span class="green">356</span>.<span class="white">65</span> ISK</td>
</tr>

I initially added spans to the numbers like this:

$('.numColour').each(function(){
    var tempVal = $(this).html();
    tempVal = tempVal.replace(' ISK', '</span> ISK').replace('.', '</span>.<span>').replace(/,/g, '</span>,<span>');
    tempVal = "<span>" + tempVal;
    $(this).html(tempVal);
});

But I'm having trouble figuring out how to add the classes based on the number value. For instance, fractions should be white, hundreds should be green, thousands should be blue, millions should be red, and hundreds of millions should be yellow.

I'm stuck. Any help would be greatly appreciated. Thank you.

jquery css

Answer 1

Answer №1

Here is the solution that worked perfectly for me:

let colors = ['dog', 'cat', 'mouse', 'hamster'];
$('td.numColor').html(function () {
    let input = $(this).text();
    let numbers = input.split(' ');
    let decimal = '<span class="frac">' + numbers[0].split('.')[1] + "</span>";
    let frontPart = numbers[0].split('.')[0].split(',');
    for (let i = frontPart.length - 1, j = 0; i >= 0; i--, j++) {
        frontPart[i] = '<span class="' + colors[j] + '">' + frontPart[i] + '</span>'
    }
    finalOutput = frontPart.join(',') + '.' + decimal + ' ' + numbers[1];
    return (finalOutput)
})

Check out the jsFiddle example for reference

Answer 2

Here is the solution that worked perfectly for me:

let colors = ['dog', 'cat', 'mouse', 'hamster'];
$('td.numColor').html(function () {
    let input = $(this).text();
    let numbers = input.split(' ');
    let decimal = '<span class="frac">' + numbers[0].split('.')[1] + "</span>";
    let frontPart = numbers[0].split('.')[0].split(',');
    for (let i = frontPart.length - 1, j = 0; i >= 0; i--, j++) {
        frontPart[i] = '<span class="' + colors[j] + '">' + frontPart[i] + '</span>'
    }
    finalOutput = frontPart.join(',') + '.' + decimal + ' ' + numbers[1];
    return (finalOutput)
})

Check out the jsFiddle example for reference

Answer 3

Answer №2

While not the most efficient solution, here are some functions to help you get started. DEMO

HTML

<table id="numbers">
  <tr>
    <td class="numColour">20,000,365.00 ISK</td>
  </tr>
  <tr>
    <td class="numColour">2,467,218,928.46 ISK</td>
  </tr>
  <tr>
    <td class="numColour">498,356.65 ISK</td>
  </tr>
</table>

CSS

body {
  background: #666;
  color: #999;
}

.numColour {
  font-family: monospace;
}

.fraction {
  color: #fff;
}

.int-group-1 {
  color: #00c800;
}

.int-group-2 {
  color: #0000c8;
}

.int-group-3 {
  color: #c80000;
}

.int-group-4 {
  color: #c8c800;
}

.int-group-5 {
  color: #00c8c8;
}

JavaScript

var SEPARATOR_DECIMAL_US_EN = '.';
var SEPARATOR_GROUP_US_EN = ',';

var normalizeNumberFromString = function(s, decimalSeparator) {
  var intParts;
  decimalSeparator = decimalSeparator || SEPARATOR_DECIMAL_US_EN;
  var normalized = s.trim().replace(/[^0-9.]/g, "");
  var parts = normalized.split(decimalSeparator);
  return {
    intPart: parts[0],
    fractionPart: parts[1]
  }
}

var separateIntIntoReversedGroups = function(i) {
  var parts = [];
  var part;
  i = parseInt(i, 10);

  while (i > 0) {
    part = i % 1000;
    parts.push(part);
    i = parseInt(i / 1000, 10);
  }
  return parts;
}

var padNum = function(n, pad, len) {
  var i = 0;
  var padLength;
  var s = '';

  n = '' + n;

  pad = '' + pad;
  pad = pad.charAt(0) || ' ';

  if (n.length >= len) {
    return '' + n;
  }

  padLength = len - n.length;
  for (i; i < padLength; ++i) {
    s = s + pad;
  }
  s = s + n;
  return s;
}

var formatStringFromSeparatedNumber = function(reversedIntGroups, fractionPart, groupSeparator, decimalSeparator) {
  var g, i, intGroups = [], numGroups = reversedIntGroups.length, s = '';

  groupSeparator = groupSeparator || SEPARATOR_GROUP_US_EN;
  decimalSeparator = decimalSeparator || SEPARATOR_DECIMAL_US_EN;

  for (i = reversedIntGroups.length - 1; i >= 0; i--) {
    g = '<span class="int-group-' + (i+1) + '">';
    if (i < reversedIntGroups.length - 1) {
      g += padNum(reversedIntGroups[i], 0, 3);
    } else {
      g += reversedIntGroups[i];
    }
    g += '</span>';
    intGroups.push(g);
  }
  s = intGroups.join(groupSeparator);
  s = s + decimalSeparator + '<span class="fraction">' + fractionPart + '</span>';
  return s;
};

var formatNumberString = function(s) {
  var parts, reversedIntGroups;
  parts = normalizeNumberFromString(s);
  reversedIntGroups = separateIntIntoReversedGroups(parts.intPart);
  return formatStringFromSeparatedNumber(reversedIntGroups, parts.fractionPart, ',', '.');
};

var replaceWithFormattedNumber = function(i, el) {
  var $el = $(el);
  var v = $el.html();
  v = formatNumberString(v);
  console.log('v::', v);
  $el.html(v);
};

$(document).ready(function() {
  $('.numColour').each(replaceWithFormattedNumber);
});

Answer 4

While not the most efficient solution, here are some functions to help you get started. DEMO

HTML

<table id="numbers">
  <tr>
    <td class="numColour">20,000,365.00 ISK</td>
  </tr>
  <tr>
    <td class="numColour">2,467,218,928.46 ISK</td>
  </tr>
  <tr>
    <td class="numColour">498,356.65 ISK</td>
  </tr>
</table>

CSS

body {
  background: #666;
  color: #999;
}

.numColour {
  font-family: monospace;
}

.fraction {
  color: #fff;
}

.int-group-1 {
  color: #00c800;
}

.int-group-2 {
  color: #0000c8;
}

.int-group-3 {
  color: #c80000;
}

.int-group-4 {
  color: #c8c800;
}

.int-group-5 {
  color: #00c8c8;
}

JavaScript

var SEPARATOR_DECIMAL_US_EN = '.';
var SEPARATOR_GROUP_US_EN = ',';

var normalizeNumberFromString = function(s, decimalSeparator) {
  var intParts;
  decimalSeparator = decimalSeparator || SEPARATOR_DECIMAL_US_EN;
  var normalized = s.trim().replace(/[^0-9.]/g, "");
  var parts = normalized.split(decimalSeparator);
  return {
    intPart: parts[0],
    fractionPart: parts[1]
  }
}

var separateIntIntoReversedGroups = function(i) {
  var parts = [];
  var part;
  i = parseInt(i, 10);

  while (i > 0) {
    part = i % 1000;
    parts.push(part);
    i = parseInt(i / 1000, 10);
  }
  return parts;
}

var padNum = function(n, pad, len) {
  var i = 0;
  var padLength;
  var s = '';

  n = '' + n;

  pad = '' + pad;
  pad = pad.charAt(0) || ' ';

  if (n.length >= len) {
    return '' + n;
  }

  padLength = len - n.length;
  for (i; i < padLength; ++i) {
    s = s + pad;
  }
  s = s + n;
  return s;
}

var formatStringFromSeparatedNumber = function(reversedIntGroups, fractionPart, groupSeparator, decimalSeparator) {
  var g, i, intGroups = [], numGroups = reversedIntGroups.length, s = '';

  groupSeparator = groupSeparator || SEPARATOR_GROUP_US_EN;
  decimalSeparator = decimalSeparator || SEPARATOR_DECIMAL_US_EN;

  for (i = reversedIntGroups.length - 1; i >= 0; i--) {
    g = '<span class="int-group-' + (i+1) + '">';
    if (i < reversedIntGroups.length - 1) {
      g += padNum(reversedIntGroups[i], 0, 3);
    } else {
      g += reversedIntGroups[i];
    }
    g += '</span>';
    intGroups.push(g);
  }
  s = intGroups.join(groupSeparator);
  s = s + decimalSeparator + '<span class="fraction">' + fractionPart + '</span>';
  return s;
};

var formatNumberString = function(s) {
  var parts, reversedIntGroups;
  parts = normalizeNumberFromString(s);
  reversedIntGroups = separateIntIntoReversedGroups(parts.intPart);
  return formatStringFromSeparatedNumber(reversedIntGroups, parts.fractionPart, ',', '.');
};

var replaceWithFormattedNumber = function(i, el) {
  var $el = $(el);
  var v = $el.html();
  v = formatNumberString(v);
  console.log('v::', v);
  $el.html(v);
};

$(document).ready(function() {
  $('.numColour').each(replaceWithFormattedNumber);
});

Formatting of large numerical values with jQuery

Answer №1

Answer №2

Similar questions

Unable to choose a child div using jQuery

Enhance user experience with a dynamic Bootstrap combo box that updates based on

Is it possible to edit the HTML DOM of an external URL that is opened using window.open?

After making an AJAX call, the table data can be found in page 1 under the tbody

Using jQuery to retrieve the value of an input with a designated class name

Creating a Masonry Slider with varying heights and widths of images is a simple and effective way to showcase diverse content in a visually

Creating a dropdown menu using jQuery

Error: The expression #categories_id(categories) cannot be identified due to a syntax error

Angular 2/Typescript experiencing a glitch with Jquery carousel functionality

Customizing the date format in jQuery datepicker for ASP.NET applications

Can you identify the selected item on the menu?

Suggestions for integrating an Autocomplete plugin into the CK classic editor 5 for ASP .net core MVC

Determining the Height of a Navigation Bar Automatically with CSS

Move the final column from one table to another table given a specific criterion

Turn off the ability to view the content of .css and .js files within the browser

Tips for creating sliding header content alongside the header

Interactive search functionality using jQuery

Using Ajax post to retrieve data from multiple tables in PHP and MYSQL

Tips for eliminating annoying white space on petite gadgets with css programming?

Mysterious and never-ending loop that seems to loop endlessly and eludes my