JSFiddle - React, Tailwind, and code Playground

by Mottie

HTML

<script src="https://rawgit.com/Mottie/javascript-number-formatter/master/lib/format.js"></script>
<h3>
  <a href="https://github.com/Mottie/javascript-number-formatter#readme">
    Javascript Number Formatter
  </a>
  (<a href="http://mottie.github.io/javascript-number-formatter/">more examples</a>)
</h3>
<label>
  Value
  <input class="value" type="text" value="1234567890.1234">
</label>
<p></p>
<label>
  Mask
  <input class="mask" type="text" value="#,##0.">
</label>
<p>
  Result: <span class="result"></span>
</p>

JavaScript

/*
 * Demo of https://github.com/Mottie/javascript-number-formatter
 * 
 * - Accept standard number formatting like #,##0.00 or with negation -000.####.
 * - Accept any country format like # ##0,00, #,###.##, #'###.## or any type of
 *   non-numbering symbol.
 * - Accept any numbers of digit grouping. #,##,#0.000 or #,###0.## are all
 *   valid.
 * - Accept any redundant/fool-proof formatting. ##,###,##.# or 0#,#00#.###0#
 *   are all OK.
 * - Auto number rounding.
 * - Simple interface, just supply mask & value like this:
 *   format( "0.0000", 3.141592); // 3.1416
 * - Include a prefix & suffix with the mask
 *   format( "$ #,##0.00 USD", 3.141592); // $ 3.14 USD
*/
function update() {
  let mask = document.querySelector(".mask").value,
    value = parseFloat(document.querySelector(".value").value);
  document.querySelector(".result").textContent = format(mask, value);
}

[...document.querySelectorAll(".mask, .value")].forEach(el => {
  el.addEventListener("input", update);
});
update();