如何在没有插件的情况下在 Jquery 中格式化数字？ [复制]

Question

我在 Jquery 中有以下代码，用于我正在开发的一个 forn：

$(document).ready(function () {
    function RemoveRougeChar(convertString) {
        if (convertString.substring(0, 2) == ".") {
            return convertString.substring(1, convertString.length)
        }
        return convertString;
    }
    $('#float1').on("focus", function (e) {
            var $this = $(this);
            var num = $this.val().replace(/,/g, "");
            $this.val(num);
        })
        .on("blur", function (e) {
            var $this = $(this);
            var num = $this.val().replace(/[^0-9]+/g, '').replace(/,/gi, "").split("").reverse().join("");
            var num2 = RemoveRougeChar(num.replace(/(.{3})/g, "$1,").split("").reverse().join(""));
            $this.val(num2);
        });
});

我的 HTML：

<input id="float1" decimalPlaces="2" type="text"  style="width:100px;margin-left:5px;"/>

例如，如果我在单击后的字段中键入值 4461,65，则返回的值为 ,446,165。我希望结果是：4,461.65。我在 Stackoverflow 上阅读了很多关于此的解决方案，它们都暗示了 Jquery 格式化插件。我希望在没有插件的情况下这样做，这样我可以更好地理解代码。这可能吗？

Answer 1

有时基本的 javascript 是最好的解决方案。

	function ModifySelection (textField, value)
	{
        if ('selectionStart' in textField)
        {
            textField.value = [
            	textField.value.slice( 0, textField.selectionStart ),
            	value,
            	textField.value.slice( textField.selectionEnd )
            ].join('');
        }
        else
        {
        	// Internet Explorer before version 9
            // create a range from the current selection
            var textRange = document.selection.createRange();

            // check whether the selection is within the textField
            var rangeParent = textRange.parentElement();

            if (rangeParent === textField)
                textRange.text = value;
            else
            	textField.value += value;
        }
    }

   	var
		// Get decimal separator
		dec_separator = (0.1).toLocaleString().substr(1,1),
		dec_xsanitize = new RegExp('[' + dec_separator + ']', 'g'),
		dec_separator_code = dec_separator.charCodeAt(0),

		// Get thousands separator
		tho_separator = (1000).toLocaleString().substr(1,1),
		tho_xcleaner = new RegExp('[' + tho_separator + ']', 'g'),
		tho_xcleaner_test = new RegExp( tho_xcleaner.source ),

		//
		num_xsanitize = new RegExp('^0+(?=[^' + dec_separator + ']|$)|[^\\d' + dec_separator + ']+', 'g'),
		num_xsanitize_test = new RegExp( num_xsanitize.source );

	$('#float1')
		.on("focus", function ()
		{
			if ( this.value === '0' )
				this.value = '';
			else ( tho_xcleaner_test.test( this.value ) )
				this.value = this.value.replace( tho_xcleaner, '' );
		})
		.on("blur", function ()
		{
			var number = parseFloat(
							this.value
								.replace( tho_xcleaner, '' ) // Clean thousands separator
								.replace( dec_xsanitize, '.' ) // Change decimal separator
						 );

			this.value = isNaN(number) ?
							'0'
							:
							number.toLocaleString();
		})
		.on("keypress", function (evt)
		{
			var key = evt.keyCode;

			if ( key === 8 || key > 47 && key < 58 ) // Allow backspace and numbers
				return;

			// Ensuring point once
			if ( key === dec_separator_code )
			{
				// Adding new point reference
				ModifySelection( this, '\t' );

				var value = this.value
								.replace( dec_xsanitize, '' ) // Remove existing points
								.replace( /\t+/g, dec_separator ) // Restore  point reference;

				// Prepend zero if needed
				if ( value[0] === dec_separator )
					value = '0' + value;

				this.value = value;
			}

			// Optional: prepend single minus symbol

			evt.preventDefault(); // Prevent printing
			evt.stopPropagation(); // Kill event now
		})
		.on("input", function ()
		{
			if (num_xsanitize_test.test(this.value))
				this.value = this.value.replace( num_xsanitize, '' );
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="float1" decimalPlaces="2" type="text" />