Formateo de numeros en JS

app/resources/views/layout/body/scripts/number_format.blade.php

@@ -0,0 +1,45 @@
+@push('page_scripts')
+    <script>
+        Intl.NumberFormat.prototype.parse = function(valueString) {
+            const format = new Intl.NumberFormat(this.resolvedOptions().locale);
+            const parts = format.formatToParts(-12345.6);
+            const numerals = Array.from({ length: 10 }).map((_, i) => format.format(i));
+            const index = new Map(numerals.map((d, i) => [d, i]));
+            _minusSign = new RegExp(`[${parts.find(d => d.type === 'minusSign').value}]`);
+            _group = new RegExp(`[${parts.find(d => d.type === 'group').value}]`, 'g');
+            _decimal = new RegExp(`[${parts.find(d => d.type === 'decimal').value}]`);
+            _numeral = new RegExp(`[${numerals.join('')}]`, 'g');
+            _index = d => index.get(d);
+
+            const DIRECTION_MARK = /\u061c|\u200e/g
+            return +(
+                valueString.trim()
+                    .replace(DIRECTION_MARK, '')
+                    .replace(_group, '')
+                    .replace(_decimal, '.')
+                    .replace(_numeral, _index)
+                    .replace(_minusSign, '-')
+            )
+        }
+        Intl.NumberFormat.prototype.isLocale = function(stringValue) {
+            const format = new Intl.NumberFormat(this.resolvedOptions().locale);
+            const parts = format.formatToParts(-12345.6);
+            const group = parts.find(d => d.type === 'group').value;
+            const decimal = parts.find(d => d.type === 'decimal').value;
+
+            if (stringValue.includes(group)) {
+                if (stringValue.includes(decimal)) {
+                    return stringValue.indexOf(group) < stringValue.indexOf(decimal)
+                }
+                if (stringValue.split(group).map(d => d.length).filter(d => d > 3).length > 0) {
+                    return false
+                }
+                return stringValue.split(group).length > 2;
+            }
+            if (stringValue.includes(decimal)) {
+                return stringValue.split(decimal).length <= 2;
+            }
+            return false
+        }
+    </script>
+@endpush

app/resources/views/layout/body/scripts/number_input.blade.php

@@ -0,0 +1,72 @@
+@push('page_scripts')
+    <script>
+        class NumberInput {
+            input
+            isRational
+            outputLocale
+            currentValue
+            formatters
+
+            constructor({input, isRational, outputLocale}) {
+                this.input = input
+                this.isRational = isRational
+                this.outputLocale = outputLocale
+
+                this.formatters = {}
+                const locales = ['es-CL', 'en-US']
+                locales.forEach(locale => {
+                    this.formatters[locale] = {
+                        rational: new Intl.NumberFormat(locale, {minimumFractionDigits: 2, maximumFractionDigits: 2}),
+                        integer: new Intl.NumberFormat(locale)
+                    }
+                })
+
+                if (this.input.value !== '') {
+                    this.currentValue = this.process(this.input.value)
+                }
+            }
+            watch() {
+                this.input.addEventListener('change', event => {
+                    const value = this.process(event.target.value)
+                    this.currentValue = value
+                    this.input.value = this.format(value)
+                })
+            }
+            process(stringValue) {
+                if (stringValue === '') {
+                    return ''
+                }
+                if (typeof stringValue !== 'string') {
+                    return stringValue
+                }
+                return this.formatters[this.detectLocale(stringValue)][this.isRational ? 'rational' : 'integer'].parse(stringValue)
+            }
+            detectLocale(stringValue) {
+                if (stringValue === '') {
+                    return ''
+                }
+                if (typeof stringValue !== 'string') {
+                    return stringValue
+                }
+                const outputFormat = this.formatters[this.outputLocale][this.isRational ? 'rational' : 'integer'].isLocale(stringValue)
+                const otherFormats = Object.entries(this.formatters).filter(formatter => formatter[0] !== this.outputLocale).map(formatter => {
+                    return {
+                        locale: formatter[0],
+                        value: formatter[1][this.isRational ? 'rational' : 'integer'].isLocale(stringValue)
+                    }
+                }).filter(formatter => formatter.value)
+
+                if (outputFormat) {
+                    return this.outputLocale
+                }
+                if (otherFormats.length > 0) {
+                    return otherFormats[0].locale
+                }
+                return 'en-US'
+            }
+            format(value) {
+                return this.formatters[this.outputLocale][this.isRational ? 'rational' : 'integer'].format(value)
+            }
+        }
+    </script>
+@endpush