{"id":41,"date":"2010-01-30T21:48:20","date_gmt":"2010-01-31T02:48:20","guid":{"rendered":"http:\/\/jamesroberts.name\/blog\/?p=41"},"modified":"2010-02-07T15:06:23","modified_gmt":"2010-02-07T20:06:23","slug":"number-formatter-for-javascript-with-prototype","status":"publish","type":"post","link":"https:\/\/jamesroberts.name\/blog\/2010\/01\/30\/number-formatter-for-javascript-with-prototype\/","title":{"rendered":"Number Formatter for Javascript with Prototype"},"content":{"rendered":"<p>So i had to fix a ROI calculator on a client&#8217;s website today.  Whoever added the content used some script they found that was using jQuery, which of course was totally screwed by Prototype&#8230;..soooo, I decided to convert the script to use prototype.  One part of the script was using jQuery&#8217;s number format plugin.  I then delved into extending javscript&#8217;s native Math object to have a format number function.  <\/p>\n<p>You can see a demo here:  <a href=\"\/project-src\/number-format\/\" target=\"_blank\">Number Format Demo<\/a>.  It has some options for adding commas to the whole number, number of decimal places to show, format for currency, and more&#8230;.<\/p>\n<p>Download: <a href=\"\/project-src\/number-format\/numberFormat.js\">numberFormat.js<\/a><\/p>\n<p>I finally ended up with this slick code:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\nObject.extend(Math, {\r\n\tformatNumber:function(n, options){\r\n\t\tvar options = Object.extend({\r\n\t\t\tdecimals:0,\r\n\t\t\tcurrency:false,\r\n\t\t\tcurrencySymbol: '$ ',\r\n\t\t\tformatWhole:true,\r\n\t\t\twholeDelimiter:',',\r\n\t\t\tdecimalDelimiter:'.'\r\n\t\t},options);\r\n\r\n\t\tvar nArr = new Array();\r\n\t\tnArr = String(n).split('.');\r\n\t\t\r\n\t\tvar whole = (typeof nArr[0]!='undefined')?nArr[0]:'0';\r\n\t\tif(options.formatWhole){\r\n\t\t\tvar exp = \/(\\d+)(\\d{3})\/;\r\n\t\t\twhile (exp.test(whole)) {\r\n\t\t\t\twhole = whole.replace(exp, '$1' + options.wholeDelimiter + '$2');\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tif(typeof nArr[1]!='undefined'){\r\n\t\t\tvar remainder = nArr[1];\r\n\t\t}else{\r\n\t\t\tvar remainder = '';\r\n\t\t\tfor(var i=0;i<options.decimals;i++){remainder += '0'}\r\n\t\t}\r\n\t\t\r\n\t\tvar pfix = options.currency?options.currencySymbol:'';\r\n\t\t\r\n\t\tif(options.decimals<=0) return pfix + whole;\r\n\t\t\r\n\t\tvar a = new Array();\r\n\t\tfor(var i = 0; i < options.decimals; i++){\r\n\t\t\tif(remainder.charAt(i) != '') a[i] = remainder.charAt(i);\r\n\t\t\telse a[i] = '0';\r\n\t\t}\r\n\t\t\r\n\t\treturn pfix + whole + options.decimalDelimiter + a.join(\"\");\r\n\t}\r\n});\r\n<\/pre>\n<p>To use the object extension, try this:<\/p>\n<pre lang=\"javascript\" line=\"1\">\r\nMath.formatNumber('4204204.420',{\r\n\tdecimals:2,\r\n\tcurrency:true,\r\n\tcurrencySymbol:'$ ',\r\n\tformatWhole:true,\r\n\twholeDelimiter:',',\r\n\tdecimalDelimiter:'.'\r\n});\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>So i had to fix a ROI calculator on a client&#8217;s website today. Whoever added the content used some script they found that was using jQuery, which of course was totally screwed by Prototype&#8230;..soooo, I decided to convert the script to use prototype. One part of the script was using jQuery&#8217;s number format plugin. I [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[9,61,8,7],"_links":{"self":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/41"}],"collection":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":9,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/posts\/41\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/media?parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/categories?post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jamesroberts.name\/blog\/wp-json\/wp\/v2\/tags?post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}