Tengo un problema complejo con una input simple. Quiero que el usuario ingrese una cantidad de dinero, así que naturalmente pensé en usar un tipo de number . El problema es que vivo en Europa y los decimales se escriben con comas (por lo que la entrada de números agregará automáticamente una coma como separador), pero mi lógica de backend espera puntos para los centavos.
Después de buscar en todas partes alternativas a este problema, solo encontré que podía usar una entrada de text y verificar la entrada del usuario con una cadena de .replace para probar que el usuario solo está ingresando números y, finalmente, un punto seguido de solo dos números para los centavos .
Este es el código que hemos creado hasta ahora:
export const onChangeCustomInput = (e) => { let value = e.target.value value = value .replace(/[A-Za-z]+$/g, '') .replace(/,/g, '.') .replace(/ /g, '') .replace(/\B(?=(\d{3})+(?!\d))/g, ' ') .replace(/[.\s]{2,}/, '.') .split('.') if (typeof value === 'object' && value.length > 1) { value[1] = value[1].substr(0, 2) if (value.length === 3) { value.splice(2, 1) } value = value.join('.') } e.target.value = typeof value === 'object' ? value[0] : value }este es un código muy pesado (y feo), y la verificación de Sonar falló diciendo que esto puede conducir a un ataque de Denegación de Servicio (?...).
¿Hay una mejor manera de manejar este caso en javascript vainilla?
¿Puedes intentar con LocaleString?
Básicamente, si tiene un número, puede establecer en qué tipo de país lo está usando.
Por lo tanto, puede mostrarlo como un número de la UE, pero enviarlo al backend en el otro formato.
Un ejemplo:
var number = 35001235.12 number.toLocaleString('en-US') // returns '35,001,235.12' number.toLocaleString('de-De') // returns '35.001.235,12'Puede leer más en: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
Podría intentar usar la propiedad valueAsNumber del elemento de entrada. El valor es numérico, por lo que no debería importar lo que ingresó el usuario. Si la entrada es incorrecta, toma el valor de NaN .
Puede usar el paquete Inputmask , funciona perfectamente para su caso de uso, usará esta expresión regular [0-9]*\.[0-9]{2} para que coincida con su ejemplo
$(document).ready(function(){ Inputmask().mask(document.querySelectorAll("input")); }); <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script> <script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script> <input data-inputmask-regex="[0-9]*\.[0-9]{2}" />