Tengo una entrada de texto y estoy tratando de restringirla según el atributo lang . Si el lang está configurado en fr , solo quiero permitir números y una sola coma en la entrada y si está configurado en en , solo quiero permitir números y un solo punto en la entrada. Lo tengo funcionando para fr hasta ahora, así que básicamente me pregunto cuál sería el patrón de replace para en .
function formatNum(lang, $this, val) { let pattern = ''; if (lang === 'fr') { // allow only numbers and a single comma pattern = $this.val().replace(/[^0-9,]/g, '').replace(/(,.*?),(.*,)?/, '$1'); } else { // allow only numbers and a single period } if (pattern !== $this.val()) $this.val(pattern); } $(function() { $('input').keyup(function() { let $this = $(this), lang = $this.parent().attr('lang'), val = $this.val(); formatNum(lang, $this, val); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div lang="fr"> <h3>French</h3> <input type="text" /> </div> <div lang="en"> <h3>English</h3> <input type="text" /> </div>Admito que es probable que esta no sea una respuesta directa: analizar un número con internacionalización es "difícil" en JavaScript y hacer esto en un evento keyup para una entrada es probablemente un desafío, rompiéndose a medida que se inyecta el formato. HAY maneras pero...
Le sugiero que lo analice a medida que lo ingresa y coloque el texto del formato (usando el método de cadena local estándar) en otro elemento y reemplace el texto después de que se active el evento de cambio.
Perdóneme por refactorizar su función, pero estaba haciendo varias cosas que rompen la S en los principios SÓLIDOS, así que simplemente devolví el número formateado y lo usé.
También agregué un ejemplo de un atributo de datos que podría estar más estandarizado que el atributo "lang".
Otras "formas" serían almacenar la cadena formateada en un atributo de datos (en lugar del lapso) y trabajar a partir de eso; el desafío es "mostrar" pero "analizar" y crear una función de análisis para cada idioma (o incluso un pocos) va a ser un desafío en mi opinión.
function formatNum(lang, val) { let number = parseFloat(val); let formattedNumber = number.toLocaleString(lang) return formattedNumber; } $(function() { $('.number-input').on('keyup', function() { let $this = $(this), lang = $this.parent().attr('lang'), val = $this.val(); lang == "" ? lang : $this.data("language"); let formatted = formatNum(lang, val); $this.next(".output-of-entry").html(formatted); }).on('change', function() { $(this).val($(this).next(".output-of-entry").text()); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div lang="fr-FR"> <h3>French</h3> <input class="number-input" type="text" /> <span class="output-of-entry"></span> </div> <div lang="en-US"> <h3>English</h3> <input class="number-input" type="text" /> <span class="output-of-entry"></span> </div> <div> <h3>English using data</h3> <input data-language="en-US" class="number-input" type="text" /> <span class="output-of-entry"></span> </div>