Number Formatting

Justin Barlow May 12, 2008

General

These two functions clean up and format numbers quite nicely. One function takes any decimal number, negative or positive, and formats it by adding commas every three digits. The other function strips any non-numeric characters from a string leaving you with a valid decimal number. It considers the minus sign and the period to be numeric and will not strip them unless the minus sign is not at the beginning of the number or there is more than one period. These functions make use of regular expressions to do the heavy lifting.

numberFormat():

stripNonNumeric():

stripNonNumeric() then numberFormat():

Notes

Created by: Justin Barlow
Web Site: http://www.netlobo.com/
Posted: May 12, 2008

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: numbFormat.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Justin Barlow | http://www.netlobo.com/ */

// This function formats numbers by adding commas
function numberFormat(nStr){
  nStr += '';
  x = nStr.split('.');
  x1 = x[0];
  x2 = x.length > 1 ? '.' + x[1] : '';
  var rgx = /(\d+)(\d{3})/;
  while (rgx.test(x1))
    x1 = x1.replace(rgx, '$1' + ',' + '$2');
  return x1 + x2;
}

// This function removes non-numeric characters
function stripNonNumeric( str ){
  str += '';
  var rgx = /^\d|\.|-$/;
  var out = '';
  for( var i = 0; i < str.length; i++ ){
    if( rgx.test( str.charAt(i) ) ){
      if( !( ( str.charAt(i) == '.' && out.indexOf( '.' ) != -1 ) ||
             ( str.charAt(i) == '-' && out.length != 0 ) ) ){
        out += str.charAt(i);
      }
    }
  }
  return out;
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="numbFormat.js"></script>

Body

Paste this code into the BODY section of your HTML document


		<div>
			numberFormat():<br>
			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numFormatResult').innerHTML = numberFormat( this.value );">

				<input type="reset" value="clear">
			</form>
			<span id="numFormatResult"></span>
			<br><br>
			stripNonNumeric():<br>
			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numStripResult').innerHTML = stripNonNumeric( this.value );">
				<input type="reset" value="clear">

			</form>
			<span id="numStripResult"></span>
			<br><br>
			stripNonNumeric() then numberFormat():<br>
			<form method="get" onsubmit="javascript:return false;">
				<input type="text" onkeyup="javascript:document.getElementById('numBothResult').innerHTML = numberFormat( stripNonNumeric( this.value ) );">
				<input type="reset" value="clear">
			</form>

			<span id="numBothResult"></span>
		</div>

Leave a Response

(1 comment)

Hi,[br /][br /]this is nice one...[br /][br /]good

Navin May 16, 2008

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details