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

Posted 2023-04-14

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

【英文标题】：How do I format a number in Jquery without a plugin? [duplicate]

【发布时间】：2015-06-12 14:50:00

【问题描述】：

我在 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。我在 *** 上阅读了很多关于此的解决方案，它们都暗示了 Jquery 格式化插件。我希望在没有插件的情况下这样做，这样我可以更好地理解代码。这可能吗？

【问题讨论】：

openexchangerates.github.io/accounting.js

【参考方案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" />

【讨论】：

捕获千位和小数分隔符，允许多个语言环境

ArcangelZith 非常感谢！！！你让这个网站变得更好。

ArcangelZith 有没有办法只允许在字段中输入数字并且只允许输入一次逗号？我尝试在 keydown 上添加例外，现在它是如何输入任何数字的。

这是我添加的：.on("keydown", function(event) var key = window.event ? event.keyCode : event.which; if (event.keyCode == 8 || event.keyCode == 46 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39) return true; else if ( key < 48 || key > 57 ) return false; else return true; )

更新：立即查看 :)