当前位置：首页 > 文章列表 > 文章 > 前端 > jQuery添加逗号和英镑符号的技巧

jQuery添加逗号和英镑符号的技巧

2025-11-11 11:39:38 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《jQuery 添加逗号和英镑符号的方法》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

使用 jQuery 在文本输入框中添加逗号并添加英镑符号 £

本文介绍了如何使用 jQuery 实时格式化文本输入框，在用户输入数字时自动添加千位分隔符（逗号），并在输入框前添加英镑符号 £。通过结合正则表达式和 jQuery 的事件处理，可以实现一个用户友好的、具有货币格式的输入框。

在 Web 开发中，经常需要处理货币输入。为了提高用户体验，通常需要在用户输入数字时自动添加千位分隔符（逗号）和货币符号。本文将介绍如何使用 jQuery 实现这一功能，具体来说，是在一个文本输入框中，用户输入数字时自动添加逗号作为千位分隔符，并在输入框前添加英镑符号 £。

实现原理

核心思路是监听输入框的 keyup 事件，每次用户释放按键后，获取输入框的值，然后使用正则表达式去除所有非数字字符，再使用正则表达式添加逗号作为千位分隔符，最后在字符串前面加上英镑符号 £。

具体实现

以下是完整的 jQuery 代码：

$("#income").keyup(function(event) {
  // 跳过方向键
  if (event.which >= 37 && event.which <= 40) return;

  // 格式化数字
  $(this).val(function(index, value) {
    return "£" + value
      .replace(/\D/g, "") // 去除所有非数字字符
      .replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 添加逗号
  });
});

代码解释：

$("#income").keyup(function(event) { ... });：这段代码监听了 id 为 income 的输入框的 keyup 事件。当用户在输入框中释放按键时，就会触发这个函数。
if (event.which >= 37 && event.which <= 40) return;：这段代码用于跳过方向键的处理。event.which 属性返回按键的键码。方向键的键码范围是 37 到 40。
$(this).val(function(index, value) { ... });：这段代码使用 $(this).val() 方法来设置输入框的值。$(this) 指的是当前的输入框元素。function(index, value) 是一个回调函数，index 是元素在集合中的索引，value 是当前的值。
value.replace(/\D/g, "")：这段代码使用正则表达式 /\D/g 来去除所有非数字字符。\D 表示匹配任何非数字字符，g 表示全局匹配。
value.replace(/\B(?=(\d{3})+(?!\d))/g, ",")：这段代码使用正则表达式 /\B(?=(\d{3})+(?!\d))/g 来添加逗号作为千位分隔符。
- \B 表示匹配非单词边界。
- (?=(\d{3})+(?!\d)) 是一个正向肯定查找，用于匹配符合条件的字符串，但不包含在最终的匹配结果中。
- \d{3} 表示匹配三个数字。
- (?!\d) 表示后面不能是数字。
- 整个正则表达式的意思是：匹配非单词边界，且后面跟着三个数字的倍数，且后面不能是数字的位置，然后将这些位置替换为逗号。
"£" + ...: 在处理后的数字字符串前加上英镑符号。

HTML 结构

以下是 HTML 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
&lt;input id=&quot;income&quot; type=&quot;text&quot; value=&quot;£&quot; /&gt;

代码解释：