Javascript currency formatting - javascript

I'm having a pesky issue...
I'm using a small javascript to format currency such as
2990 to 2.990 and 129900 to 129.900 using the current line:
var wdiscount2 = wdiscount.toFixed(3);
However, when I have a number under 1000 such as 789 it displays like 0.789
Do you have a way for me to get around this easily?

Perhaps using a library, such as accounting.js from Joss Crowcroft is a good idea? It supports all kinds of formats and is used by quite a few people I believe.
wdiscount2 = accounting.formatMoney(wdiscount)

var wdiscount2 = wdiscount > 999 ? wdiscount.toFixed(3) : wdiscount;

It looks like the questions may already be answered, but there is another alternative, which might be interesting, namely use of regular expressions.
Example:
var num = 2990;
var formattedNumber = num.toString().replace(/(\d)(?=(\d{3})(?!\d))/g, "$1.")
A few test cases (num on the left, formattedNumber on the right):
2990 => 2.990
129900 => 129.900
789 => 789 (no . for this one)
I hope that will be helpful.

The best solution I've found is to use toLocaleString:
const formatCurrency = (num, locale = 'en-US', currency = 'USD', minimumFractionDigits = 2) => {
if (isNaN(num)) {
return num;
}
return num.toLocaleString(locale, {style: 'currency', currency, minimumFractionDigits});
};
Here is an example fiddle

Related

How to use .toFixed() (or any alternative) on Nerdamer.solve solutions?

I'm using Nerdamer.solve() to get some linear equation roots. It's working fine but I wonder if there is any way to get only the first 4 decimals of every solution.
EquationSolver.js
//First step, using Nerdamer to solve the equation stored in value
sol_raw = this.nerdamer.solve(value,'x');
xs = this.nerdamer(sol_raw.toString());
//Second step, using Function() in order to evaluate the solutions
solution= Function('return ' + this.nerdamer(xs).evaluate().toString())()
At this point, I'm getting correct results like: 1.74343434. Since I'm rendering the results using Katex, I would like to know where to implement .toFixed(4) or any pseudo way (maybe a Nerdamer method to use n number of decimals on .evaluate()?).
Note.
The result (solution) is a string like [1.74343434, 0.434343, ...] so I could transform it into a float variable and then use .toFixed() but this not an easy solution because the number of roots depends on the equation's grade.
Nerdamer's documentation about evaluate: documentation
#CoronelV,
Another possible approach is to create a toFixed function for formatting the numbers which would take into account real and complex solutions and then calling it on your solutions. Here's a more generalized approach.
var toFixed = function(value, n) {
var img = Number(nerdamer.imagpart(value).text()).toFixed(n);
var real = Number(nerdamer.realpart(value).text()).toFixed(n);
// Format the number assuming i denotes imaginary in your case
var formatted = '';
if(real !== '0.0000') {
formatted += real;
}
if(img !== '0.0000') {
// Put the plus sign betweent the real and imaginary
if(img.charAt(0) !== '-' && formatted) {
formatted += '+';
}
// Assuming you're using i and not j for instance
formatted += img+'i';
}
return formatted;
};
So in your case this would be become something like:
sol_raw = this.nerdamer.solve(value,'x');
xs = this.nerdamer(sol_raw.toString()).each(function(solution) {
roundedSolutions.push(toFixed(solution, 4));
});
this.setState({
solution: roundedSolution.join(''),
equation:value})
This would possibly eliminate the need for your try catch block.
Since the solution is rendered using KaTeX, it's possible rounding the solution via Latex's package, but its even simplest taking the suggestion of #Dj Burb.
Here is my approach:
try {
sol_raw = this.nerdamer.solve(value,'x');
xs = this.nerdamer(sol_raw.toString());
Function('return '+ this.nerdamer(xs).evaluate().toString())().forEach(element => {
roundedSolution.push(element.toFixed(4)) });
} catch (e) {
}
this.setState({
solution: roundedSolution.join(''),
equation:value})
The use of try catch is imperative because while writing the equation, solution.toFixed() returns an error.

Mask the last two digits of a date in JavaScript using regex

I’m trying to demonstrate how a date would look like if it was displayed with some characters masked. Specifically, something like this:
10 August 2018 => 10 August 20**
10 August 2018 => 10 August **** (and this too if possible)
I’ve spent some time looking for working examples on here but haven’t found one for this specific example. In my own experiments I only ever end up with one asterisk (10 August 19*) instead of one per character.
It all needs to happen within a textToMask.replace(regex, '*').
I know you’d never use this in production; it’s for a visual demo.
You can use padEnd method
function maskIt(str, pad = 1) {
const slicedStr = str.slice(0,pad*-1);
const masked = slicedStr.padEnd(str.length, '*');
console.log(masked);
}
maskIt("10 August 2018",2);
maskIt("10 August 2018",4);
Here's a dirt simple mask() function, that works with any string, and doesn't involve regex:
function mask(str, amt = 1) {
if (amt > str.length) {
return '*'.repeat(str.length);
} else {
return str.substr(0, str.length-amt) + '*'.repeat(amt);
}
}
console.log(mask('10 August 2018', 2));
console.log(mask('10 August 2018', 4));
console.log(mask('test', 5));
Here is a very simple function that uses a regular expression to find a given number of digits at the end of a given date and substitutes them with an equal number of asterisks.
Example:
const mask_date = (date, n) => date.replace(new RegExp(`[\\d]{${n}}$`), "*".repeat(n));
console.log(mask_date("10 August 2018", 2));
console.log(mask_date("10 August 2018", 4));
Please note that I would really like to refactor this somehow, I just don't have the time to do it right now. Check back at some point tomorrow I may have made an edit to this to make the code flow a bit better.
I am using the second version of the String.prototype.replace function that allows you to pass a function instead of a string as the second parameter. Check the link to learn more.
This is a very rough function -- I unfortunately did not have a lot of time to write this out.
// str - string to be altered, pattern - regex pattern to look through, replacement - what to replace the found pattern with, match_length - do we match the length of replacement to the length of what it is replacing?
function mask(str, pattern, replacement="*", match_length=true){
return str.replace(pattern, function(whole, group){
//init some values;
let padLength = 0, returned = '';
// if the group is not a number, then we have a regex that has a grouping. I would recommend limiting your regex patterns to ONE group, unless you edit this.
if(typeof group != 'number'){
padLength = group.length;
returned = whole.slice(0, whole.indexOf(group)) + (replacement.repeat(match_length ? padLength : 1));
}else{
padLength = whole.length;
returned = replacement.repeat(match_length ? padLength : 1);
}
return returned;
});
}
let randomBirthdayString = 'April 3 2002';
console.log(mask(randomBirthdayString, /\d{2}(\d{2})$/) );
console.log(mask(randomBirthdayString, /\d{2}(\d{2})$/, 'x') );
console.log(mask(randomBirthdayString, /\d{2}(\d{2})$/, 'x', false) );
You can use the code below.
textToMask.replace(/..$/, '**')

jquery convert price from 5 decimals to round up to 2 decimals

I have a price number that looks like this: $27,272.70000
I'm trying to make it look like this: $27,272.70
I'm stuck with trying different methods but here is what i've got so far:
jQuery(document).ready(function() {
jQuery('.cart-table-wrapper #shopping-cart-table tbody > tr').each(function() {
var the_sp_subtotal = jQuery(this).find('td.col-total.a-right span.price').text().replace("$", "");
var new_sp_subtotal = parseFloat(the_sp_subtotal).toFixed(2);
console.log(new_sp_subtotal);
});
});
But the result that I get is: 27.00
Here is the fiddle - https://jsfiddle.net/zqe37xsk/1/
Can someone please help me, what I'm doing wrong?
Thank you
To format a currency string properly you could use the toLocaleString function. For this to properly work you have to transform your string into a float.
var price = '27,272.70000';
price = parseFloat(price.replace(/[$,]/g, ""));
console.log(price.toLocaleString('us-EN', {
style: 'currency',
currency: 'USD'
}));
parseFloat("27,272.70") returns 27 because the , in 27,272.70 is no longer part of a number.
As an alternative approach you could replace the part behind the last thousands separator and call toFixed on that. Then you can just join everything back together.
In your each function, use:
const [dollar, ...separatedNumber] = jQuery(this).find('td.col-total.a-right span.price').text().split(/\$|,/);
separatedNumber[separatedNumber.length - 1] = Number(separatedNumber.slice(-1)).toFixed(2);
console.log("$" + separatedNumber.join(","));

Converting number string to comma version

I have a Angular 2 / Typescript application string that contains number representations such as the following...
10000
10000.50
-10000
-10000.50
0
I want to add in commas after the thousand mark, for example...
10,000
10,000.50
-10,000
-10,000.50
0
What is the best way to do this?
I have tried some other answers but nothing is quite right.
For example this.value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); and this.value.toLocaleString(); don't seem to handle both the comman and decimal point.
Have you tried
var some_string_value = '-10000.50';
parseFloat(some_string_value).toLocaleString()
?
Use "indexOf('.')",splice to two part,then use the method you found.
function addComma(num){
//some type check here
var numStr = num.toString();
var intEnd = numStr.indexOf('.');
var onePart =numStr,otherPart ='';
if(intEnd !== -1){
var onePart = numStr.slice(0,intEnd);
var otherPart = numStr.slice(intEnd);
}
return onePart.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')+otherPart;
}
You can use a pipe, you can find a full answer to your question here: Add Comma Separated Thousands to Number Inputs in Angular2

What's the best way to mask a credit card in JavaScript?

In Node, I need to turn a credit card into something like this before rendering the view layer: ************1234.
Without loops and ugliness is there a utility or one liner for this? The credit card can potentially look one of these ways:
1234567898765432
1234-5678-9876-5432
1234 5678 9876 5432
Here's one way with Ramda and some RegEx:
var ensureOnlyNumbers = R.replace(/[^0-9]+/g, '');
var maskAllButLastFour = R.replace(/[0-9](?=([0-9]{4}))/g, '*');
var hashedCardNumber = R.compose(maskAllButLastFour, ensureOnlyNumbers);
hashedCardNumber('1234567898765432'); // ************5432
Demo : http://jsfiddle.net/7odv6kfk/
No need for a regex:
var cc='1234-5678-9012-3456';
var masked = '************'+cc.substr(-4); // ************3456
Will work for any format provided the last four digits are contiguous.
This is for everyone who said they didn't need another way to mask a credit card. This solution will append the last 4 chars of the card number with asterisk.
var cardNumber = '4761640026883566';
console.log(maskCard(cardNumber));
function maskCard(num) {
return `${'*'.repeat(num.length - 4)}${cardNumber.substr(num.length - 4)}`;
}
jsfiddle example
I use this function that is useful for me, because mask the credit card number and format it in blocks of four characters like this **** **** **** 1234, here the solution:
const maskCreditCard = (card) => {
return card
.replace(/.(?=.{5})/g, "*")
.match(/.{1,4}/g)
.join(" ");
};
Here's plain JavaScript using Regex with lookahead
var cardNumbers = [
"1234567898765432",
"1234-5678-9876-5432",
"1234 5678 9876 5432"
];
console.log(cardNumbers.map(maskCardNumber));
//> ["************5432", "************5432", "************5432"]
function maskCardNumber(cardNumber) {
return cardNumber.replace(/^[\d-\s]+(?=\d{4})/, "************");
};
Unlike AllienWebguy's implementation:
doesn't require an external library
does everything in one replace() call
replaces whatever number of digits with the constant number of asterisks (it should be a bit faster, but it may not be what you want)
supports only described formats (will not work, for example, with "1B2C3D4E5F6G7H89876-5432" or "1234+5678+9876=54-32")
Remove non digits, generate an asterisk string of that length - 4, append the last 4:
var masked = Array(cc.replace(/[^\d]/g, "").length - 3).join("*") + cc.substr(cc.length - 4);
Or to include space/hyphens in the mask:
var masked = Array(cc.length - 3).join("*") + cc.substr(cc.length - 4);

Categories

Resources