Javascript Archives

Helpful Javascript Prototype Functions

Sometimes the built in functionality for various Javascript primitives is not enough. Here is an assortment of useful Prototype functions. Enjoy!

/**
 * Clean all non numeric characters. Also keeping "."
 * usage: str.cleanNumber()
 */
String.prototype.cleanNumber = function() {

	var returnValue = this.replace(/[^0-9.-]/g,'');

	//let's make sure we do not return a NaN value
	if(isNaN(returnValue) || returnValue == ""){
		returnValue = 0;
	}

    return returnValue;
}


/**
 * Create a default string function to allow replacing all characters in a string
 */
String.prototype.replaceAll = function(search, replacement) {
	return this.replace(new RegExp(search, 'g'), replacement);
};


/**
 * Format a float as currency
 * usage: floatvalue.formatMoney(0, '.', ',');
 */
Number.prototype.formatMoney = function(c, d, t){
  var n = this, 
      c = isNaN(c = Math.abs(c)) ? 2 : c, 
      d = d == undefined ? "." : d, 
      t = t == undefined ? "," : t, 
      s = n < 0 ? "-" : "", 
      i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
      j = (j = i.length) > 3 ? j % 3 : 0;
     return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
   };

/**

* Clean all non numeric characters. Also keeping "."

* usage: str.cleanNumber()

String.prototype.cleanNumber = function() {

var returnValue = this.replace(/[^0-9.-]/g,'');

//let's make sure we do not return a NaN value

if(isNaN(returnValue) || returnValue == ""){

returnValue = 0;

}

return returnValue;

}

/**

* Create a default string function to allow replacing all characters in a string

String.prototype.replaceAll = function(search, replacement) {

return this.replace(new RegExp(search, 'g'), replacement);

};

/**

* Format a float as currency

* usage: floatvalue.formatMoney(0, '.', ',');

Number.prototype.formatMoney = function(c, d, t){

var n = this,

c = isNaN(c = Math.abs(c)) ? 2 : c,

d = d == undefined ? "." : d,

t = t == undefined ? "," : t,

s = n < 0 ? "-" : "",

i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "",

j = (j = i.length) > 3 ? j % 3 : 0;

return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");

};

JS Capitalize a String

Just a simple String prototype to capitalize the first letter of the string.

/**
 * Capitalize the first letter of a string
 * usage: str.capitalize()
 */
String.prototype.capitalize = function() {
	return this.charAt(0).toUpperCase() + this.slice(1);
}

/**

* Capitalize the first letter of a string

* usage: str.capitalize()

String.prototype.capitalize = function() {

return this.charAt(0).toUpperCase() + this.slice(1);

}

Convert Form to JS Object

This function will take your entire HTML form and convert all the inputs into a single JS object! Thanks to Dave over at Stack Overflow!

/**
 * Take a form and convert it into a Object for easy manipulation
 * 
 * @link https://stackoverflow.com/a/23315254
 * @link http://jsfiddle.net/akhildave/sxGtM/5002/
 */
$.fn.serializeObject = function() {
	var o = {};
	var a = this.serializeArray();
	$.each(a, function() {
		if (o[this.name] !== undefined) {
			if (!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || '');
		} else {
			o[this.name] = this.value || '';
		}
	});
	return o;
};

/**

* Take a form and convert it into a Object for easy manipulation

* @link https://stackoverflow.com/a/23315254

* @link http://jsfiddle.net/akhildave/sxGtM/5002/

$.fn.serializeObject = function() {

var o = {};

var a = this.serializeArray();

$.each(a, function() {

if (o[this.name] !== undefined) {

if (!o[this.name].push) {

o[this.name] = [o[this.name]];

}

o[this.name].push(this.value || '');

} else {

o[this.name] = this.value || '';

}

});

return o;

};

Usage is as simple as:

var formObject= $(‘form’).serializeObject();

Requires jQuery

Javascript Local and Cookie Storage

Just a couple functions to make working with Local Storage and Cookies a little easier.

 /**
  * SAVE any value to local storage
  * @param string Storage name
  * @param mixed Storage Value
  */
 function storeLocal(name, value){
	if (typeof(Storage) !== "undefined") {
		localStorage.setItem(name, JSON.stringify(value));
	}else{
		//if we do not have local storage for some reason try to use cookies
		//we are just saving for 1 day for now
		setCookie(name, JSON.stringify(value), 1);
	}
}

/**
 * GET any value to local storage
 * @param  string cname  Storage Name
 * @return string        Storage Value
 */
function getLocal(name){

	if (typeof(Storage) !== "undefined") {
		return JSON.parse(localStorage.getItem(name));
	}else{
		//if we do not have local storage for some reason try to use cookies
		return JSON.parse(getCookie(name));
	}

}

/**
 * Set a Cookie
 * @param string cname  Cookie Name
 * @param mixed cvalue  Cookie Value
 * @param int exdays How many days before expire
 */
function setCookie(cname, cvalue, exdays) {
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	var expires = "expires="+ d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/**
 * Get a cookie
 * @param  string cname  Cookie Name
 * @return string        Cookie Value
 */
function getCookie(cname) {
	var name = cname + "=";
	var ca = document.cookie.split(';');
	for(var i = 0; i <ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') {
			c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
			return c.substring(name.length,c.length);
		}
	}
	return "";
}

/**

* SAVE any value to local storage

* @param string Storage name

* @param mixed Storage Value

function storeLocal(name, value){

if (typeof(Storage) !== "undefined") {

localStorage.setItem(name, JSON.stringify(value));

}else{

//if we do not have local storage for some reason try to use cookies

//we are just saving for 1 day for now

setCookie(name, JSON.stringify(value), 1);

}

/**

* GET any value to local storage

* @param string cname Storage Name

* @return string Storage Value

function getLocal(name){

if (typeof(Storage) !== "undefined") {

return JSON.parse(localStorage.getItem(name));

}else{

//if we do not have local storage for some reason try to use cookies

return JSON.parse(getCookie(name));

}

/**

* Set a Cookie

* @param string cname Cookie Name

* @param mixed cvalue Cookie Value

* @param int exdays How many days before expire

function setCookie(cname, cvalue, exdays) {

var d = new Date();

d.setTime(d.getTime() + (exdays*24*60*60*1000));

var expires = "expires="+ d.toUTCString();

document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

}

/**

* Get a cookie

* @param string cname Cookie Name

* @return string Cookie Value

function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i = 0; i <ca.length; i++) {

var c = ca[i];

while (c.charAt(0)==' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

return c.substring(name.length,c.length);

}

return "";

}

Javascript Sorting, Summing, and Rounding

I was running into an instance where I needed to be able to sort some arrays in either ASC or DESC order. I found some nice functions to help with that.

function jbSortDesc(a,b) {
	return b - a;
}

function jbSortAsc(a,b) {
	return a - b;
}

/**
 * Round a number to X decimals
 * @param  Number 	value     	Any Number value
 * @param  int 		decimals  	The number of decimals to round to
 * @return Number           	the resulting rounded number
 */
function jbRound(value, decimals) {
	var multiplier = Math.pow(10, decimals || 0);
	return Math.round(value * multiplier) / multiplier;
}

/**
 * Sum an array using the .reduce() function
 */
function jbArraySum(total, num) {
	return total + num;
}

function jbSortDesc(a,b) {

return b - a;

}

function jbSortAsc(a,b) {

return a - b;

}

/**

* Round a number to X decimals

* @param Number value Any Number value

* @param int decimals The number of decimals to round to

* @return Number the resulting rounded number

function jbRound(value, decimals) {

var multiplier = Math.pow(10, decimals || 0);

return Math.round(value * multiplier) / multiplier;

}

/**

* Sum an array using the .reduce() function

function jbArraySum(total, num) {

return total + num;

}

Example Usage:

var arr = [6.1, 2.6 ,5.1, 2.5, 3.3, 5.4, 6.6];

//get the highest 6 elements of the array and sum them
var sum = arr.sort(jbSortDesc).slice(0, 6).reduce(jbArraySum) 
//sum = 29.1

//in this case it is pointless, but you could see how this might be helpful
var roundedSum = jbRound(sum, 2);
//sum = 29.10

var arr = [6.1, 2.6 ,5.1, 2.5, 3.3, 5.4, 6.6];

//get the highest 6 elements of the array and sum them

var sum = arr.sort(jbSortDesc).slice(0, 6).reduce(jbArraySum)

//sum = 29.1

//in this case it is pointless, but you could see how this might be helpful

var roundedSum = jbRound(sum, 2);

//sum = 29.10

Calculate Age / Date Masking

Javascript is kind of wonky about their dates. Here is a simple function to calculate age based on a given date string.

function calculateAge(birthdate){
  var today = new Date();
  today = Date.parse(today);

  var minutes = 1000 * 60;
  var hours = minutes * 60;
  var days = hours * 24;
  var years = days * 365.25;

  return Math.floor((today-birthdate) / years);
}

function calculateAge(birthdate){

var today = new Date();

today = Date.parse(today);

var minutes = 1000 * 60;

var hours = minutes * 60;

var days = hours * 24;

var years = days * 365.25;

return Math.floor((today-birthdate) / years);

}

Note: This is not perfect and does not work with every possible date string, but it works pretty well with all standard US date formats.

Here is some decent code to setup some simple date masking.

$('.datemask').on('keydown', function(e){
  if (e.key.length == 1 && isNaN(e.key)){
    e.preventDefault();
    return false;
  }

  if (e.key.length == 1){
    var v = this.value;

    if (v.match(/^\d{2}$/) !== null) {
      if(v > 12) v = 12;
      this.value = v + '/';
    } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
      v = v.split('/');
      if(v[0]>12) v[0] = 12;
      if(v[1]>31) v[1] = 31;
      this.value = v[0] + '/' + v[1] + '/';
    }else if (v.match(/^\d{2}\/\d{2}\/\d{4}$/) !== null) {
      v = v.split('/');
      if(v[0]>12) v[0] = 12;
      if(v[1]>31) v[1] = 31;

      var year = new Date().getFullYear();
      var oldest = year - 150;
      if(v[2]<oldest) v[2] = oldest;
      if(v[2]>year) v[2] = parseInt(year)-1;
      this.value = v[0] + '/' + v[1] + '/' + v[2];
    }

    return this.value;
  }
});

$('.datemask').on('keydown', function(e){

if (e.key.length == 1 && isNaN(e.key)){

e.preventDefault();

return false;

}

if (e.key.length == 1){

var v = this.value;

if (v.match(/^\d{2}$/) !== null) {

if(v > 12) v = 12;

this.value = v + '/';

} else if (v.match(/^\d{2}\/\d{2}$/) !== null) {

v = v.split('/');

if(v[0]>12) v[0] = 12;

if(v[1]>31) v[1] = 31;

this.value = v[0] + '/' + v[1] + '/';

}else if (v.match(/^\d{2}\/\d{2}\/\d{4}$/) !== null) {

v = v.split('/');

if(v[0]>12) v[0] = 12;

if(v[1]>31) v[1] = 31;

var year = new Date().getFullYear();

var oldest = year - 150;

if(v[2]<oldest) v[2] = oldest;

if(v[2]>year) v[2] = parseInt(year)-1;

this.value = v[0] + '/' + v[1] + '/' + v[2];

}

return this.value;

}

});