输入格式化金额数字，整数千分位分割，小数点保留两位

思路：使用正则将数字拆分成整数+浮点数，按需拼装

online demo

<script setup>
import { ref } from 'vue'

const number = ref()

function handleInput(e) {
  const { value } = e.target
  number.value = check(value)
}

function check(text) {
  // 开始之前去除千分符
  let targetText = text.replaceAll(',', '');

  var reg = /^(\.*)(\d+)(\.?)(\d{0,2}).*$/g;

  if (reg.test(targetText)) { //正则匹配通过，提取有效文本
    // 正则整数部分
    const int = String(Number(targetText)).replace(reg, '$2').replace(/(\d)(?=(\d{3})+$)/g,"$1,");
    // 提取小数部分
    const float = targetText.replace(reg, '$3$4');
    targetText = int + float
  }
  else { //正则匹配不通过，直接清空
    targetText = '';
  }

  return targetText; 
}
</script>

<template>
  <input v-model="number" @input="handleInput" />
</template>

2024年9月2日更新： 发现上面存在输入整数部分光标位置变化的问题，交互不好。但是这种方法可以支持只显示整数且可以自定义分隔符，也不会强制格式化小数点位 在群里交流想起一种原生API的处理办法

function formatNumberWithThousandSeparator(number, decimals = 2) {
  // 通过放大缩小数字来避免浮点数精度问题
  let factor = Math.pow(10, decimals);
  number = Math.round(number * factor) / factor;

  return number.toLocaleString('zh-CN', { 
    minimumFractionDigits: decimals, 
    maximumFractionDigits: decimals 
  });
}
let number = 0.1 + 0.2; // 可能不精确的浮点数运算
let formattedNumber = formatNumberWithThousandSeparator(number, 2);
console.log(formattedNumber); // 输出: "0.30"
let formattedNumber = formatNumberWithThousandSeparator(55555.222, 2);
onsole.log(formattedNumber); // 输出: "55,555.22"

number.toLocaleString也没有兼容问题，单纯的格式化的话该方法更好，不足点是会强制保留小数点