I needed a plugin to convert numbers to words so I started to scour the web for examples. I couldn’t find anything simple…..or that worked well. Until I stumbled upon a post by Muhammad Rashid here that seemed to work well….almost. I’ve made a couple of tweaks and fixes, and decided to create my first jQuery plugin! So first here’s the Fiddle demo. It requires the jQuery library to run. So….
Include a reference to the jQuery library, such as:
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>Here’s the plugin code. Copy and paste it into an external file and save it (if you wanted to you can minify it first here):
(function ($) {
$.fn.showNumericWords = function () {
function convertNumberToWords(number) {
if (number < 0) {
console.log("Number Must be greater than zero = " + number);
return "";
}
if (number > 100000000000000000000) {
console.log("Number is out of range = " + number);
return "";
}
if (!((typeof number === 'number' || typeof number === 'string') && number !== '' && !isNaN(number))) {
console.log("Not a number = " + number);
return "";
}
var quintillion = Math.floor(number / 1000000000000000000); /* quintillion */
number -= quintillion * 1000000000000000000;
var quar = Math.floor(number / 1000000000000000); /* quadrillion */
number -= quar * 1000000000000000;
var trin = Math.floor(number / 1000000000000); /* trillion */
number -= trin * 1000000000000;
var Gn = Math.floor(number / 1000000000); /* billion */
number -= Gn * 1000000000;
var million = Math.floor(number / 1000000); /* million */
number -= million * 1000000;
var Hn = Math.floor(number / 1000); /* thousand */
number -= Hn * 1000;
var Dn = Math.floor(number / 100); /* tens (deca) */
number = number % 100; /* ones */
var tn = Math.floor(number / 10);
var one = Math.floor(number % 10);
var res = "";
if (quintillion > 0) {
res += (((res == "") ? "" : " ") + convertNumberToWords(quintillion) + " quintillion");
}
if (quar > 0) {
res += (((res == "") ? "" : " ") + convertNumberToWords(quar) + " quadrillion");
}
if (trin > 0) {
res += (((res == "") ? "" : " ") + convertNumberToWords(trin) + " trillion");
}
if (Gn > 0) {
res += (((res == "") ? "" : " ") + convertNumberToWords(Gn) + " billion");
}
if (million > 0) {
res += (((res == "") ? "" : " ") + convertNumberToWords(million) + " million");
}
if (Hn > 0) {
res += (((res == "") ? "" : " ") + convertNumberToWords(Hn) + " thousand");
}
if (Dn) {
res += (((res == "") ? "" : " ") + convertNumberToWords(Dn) + " hundred");
}
var ones = Array("", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen");
var tens = Array("", "", "twenty", "thirty", "fourty", "fifty", "sixty", "seventy", "eighty", "ninety");
if (tn > 0 || one > 0) {
if (!(res == "")) {
res += " and ";
}
if (tn < 2) {
res += ones[tn * 10 + one];
} else {
res += tens[tn];
if (one > 0) {
res += ("-" + ones[one]);
}
}
}
return res.charAt(0).toUpperCase() + res.slice(1).toLowerCase();
}
// Iterate all elements the selector applies to
this.each(function () {
var $input = $(this);
//bind if it is a textbox
if ($input.is("input[type='text']") || $input.is("input[type='number']")) {
// Now bind to the keyup event of this individual input (keyup instead of keydown so we know which key was pressed!)
$input.on("keyup", function () {
$input.nextAll('div.numwordholder').remove();
var number = $.trim($input.val());
//remove everything except numbers
number = number.replace(/[^0-9]/g, '');
//set textbox value to remove anything except numbers
$input.val(number);
var convertedWords = convertNumberToWords(number)
if (convertedWords != null && convertedWords != "") {
$input.after('<div class="numwordholder"><span class="numword">' + convertedWords + '</span></div>');
}
});
}
});
};
}(jQuery));and here is how we can use it – note that we can only execute it on input text elements:
<body>
....
<input class="convertNumber" type="text" value="" />
...
</body>
<script>
$( document ).ready(function() {
$( ".convertNumber").showNumericWords();
});
</script>
You can style it like so. I’ve nested the span inside the div so that the message appears underneath the textbox, and the ‘word conversion’ background width expands with the text:
div.numwordholder{
margin-top:5px;
}
span.numword
{
background-color:#999999;
border-radius: 5px 5px 5px 5px;
padding:3px;
color:#FFF;
}