JavaScript 实现数字每四位用空格分隔的示例

作者:代码拾荒时间:2026-10-21 19:06:29浏览:587

本文介绍如何使用 JavaScript 结合正则表达式,实现将输入的数字每隔四位自动插入空格分隔的功能。通过 jQuery 监听输入事件,利用 replace 方法和正则分组语法,可模拟银行卡号输入时的格式化效果,提升用户填写体验。

数字每四位空格分隔的实现思路

以下是一个代码实例,展示了如何实现将数字每隔四位用空格进行分隔的功能。这种格式化处理在填写银行卡号等场景下非常常见,能够显著提升用户输入的便捷性与人性化体验。

具体实现代码如下:

JavaScript与jQuery代码实现


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>本站</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
 $('#ant').on('keyup mouseout input', function () {
  var $this = $(this);
  var v = $this.val();
  /\S{5}/.test(v) && $this.val(v.replace(/\s/g, '').replace(/(.{4})/g, "$1 "));
 });
})
</script>
</head>
<body>
<input type="text" id="ant" />
</body>
</html>

功能验证与扩展阅读

上述代码成功实现了预期的格式化要求,如需了解更多相关技术细节,可参考后续列出的相关阅读内容。

以下是相关的技术参考资料:

(1).on()方法可参阅jquery on()绑定事件处理函数详解一章节。 (2).keyup事件可参阅jQuery keyup事件一章节。 (3).val()方法可参阅jQuery val()方法一章节。 (4).test()方法可参阅正则表达式test()函数一章节。 (5).replace()方法可参阅正则表达式replace()函数一章节。 (6).$1变量可参阅正则表达式replace()函数一章节。 (7).子表达式概念可参阅正则表达式分组一章节。

作者最新文章