Format price output with Javascript

Wed, 06/29/2011 - 02:29 — thirdender

What follows is a script to format price output in Javascript. The function takes as its input a single number, forces exactly two decimal points, then adds commas for the the thousands, millions, etc. Finally, before returning the output it adds the dollar symbol and a minus sign if applicable.

Depending on where you are using this script, you may not be able to guarantee that only numbers are being passed to the code. For example, you may need to parse a string on the page to get a number before doing math (to apply a discount, calculate a price difference, etc). The first function will strip out non-numeric characters, then convert the number to a price with two or fewer decimal points. If I remember correctly, the multiplication and division by 100 not only serves to round to 2 decimal points, but also avoids a floating number problem (but I can't remember exactly, or I'd test it…).

// Take a string (possibly containing currency symbols and/or commas), // and strip out the extra characters, returning an actual number. function parsePrice(str) { return Math.round(Number(str.replace(/[^-\d\.]/g, "")) * 100) / 100; } // Take a number, and add all the necessary prettifying characters that // make a number look like a price (currency symbol, minus sign, commas). function formatPrice(price) { // Run toFixed to force exactly 2 decimal points // Note: This will round the thousandths up if applicable. For example, 3.145 // will be rounded to 3.15, but 3.144 will become 3.14 var value = Math.abs(price).toFixed(2), commaRe = /([^,$])(\d{3})\b/; // Add commas in convincing locations while (commaRe.test(value)) { value = value.replace(commaRe, "$1,$2") } // Add the appropriate currency symbol and minus sign if applicable return (price < 0 ? "-$" : "$") + value; }

So for example, say you want to apply a discount of 20% to a product page dynamically (not necessarily a good idea, but it's late and good examples aren't coming to me easily atm). The page lists the product price as "$8.99" in a DIV with the class="price". Using jQuery to get the DIV, you could write:

// Get the price from the page, and parse it to a number var listedPrice = parsePrice($(".price").text()); // Do our multiplication by .8 to get a 20% discount, then format that price and // and display it in the ".discountedPrice" element $(".discountedPrice").text(formatPrice(listedPrice * .8));

… or, you can do the entire bit on one line, if readability isn't an issue :-p

Topic:

javascript

thirdender's blog

Navigation

You are here

Format price output with Javascript

Add new comment

Filtered HTML

Plain text

Navigation

User login

You are here

Format price output with Javascript

Add new comment

Filtered HTML

Plain text