保留数字、仅一个小数点

常见于金额字段，只能是数字，小数点有且仅有一个。输入框输入时，不知道会不会复制过来个什么奇怪东西，所以要进行处理。作为自我总结，稍微记录一下

// 声明一串用于测试的字符串
const str = "哈哈12+-3.22**8zx6cz.ert3.4c/8.369"
keepNumAndOneDecimalPoint(str)

1、以小数点分割字符串再拼合

1.1、去掉数字和小数点以外的所有字符

const keepNumAndOneDecimalPoint = (str) => {
    const result = str.replace(/[^\d.]/g, "")
    console.log(result) // 123.2286.3.48.369
}

1.2、以小数点分割成数组

const keepNumAndOneDecimalPoint = (str) => {
    const result = str.replace(/[^\d.]/g, "")
    console.log(result) // 123.2286.3.48.369
    
    const arr = result.split('.');
    console.log(arr) // ["123", "2286", "3", "48", "369"]
}

1.3、拼接

arr[0]为小数点前面部分，其它都是小数点后面部分，进行拼接即可。为了严谨一些，在拼接前可以先判断，是否有多个小数点，若只有一个小数点或者没有，就不用进行拼接，直接返回result即可

const keepNumAndOneDecimalPoint = (str) => {
    const result = str.replace(/[^\d.]/g, "")
    console.log(result) // 123.2286.3.48.369
    
    const arr = result.split('.');
    console.log(arr) // ["123", "2286", "3", "48", "369"]
    
    if(arr.length <= 2) return result // 如果没有小数点或只有一个小数点，直接返回，无需额外处理
    console.log(arr.slice(1)) // ["2286", "3", "48", "369"]
    return arr[0] + "." + arr.slice(1).join("")
}

2、使用replace

replace第二个参数除了常规直接传要替换的字符串外，还可以传Function

const keepNumAndOneDecimalPoint = (str) => {
    let result = str.replace(/[^\d.]/g, "") // 先去掉数字和小数点以外所有字符，123.2286.3.48.369
    result = result.replace(/\./g, (match, index, original) => {
        // match，匹配到的子字符串，这里是每次匹配到的小数点'.'
        // index，匹配到的位置（从0开始的索引）
        // original，原始字符串
        console.log(`匹配到: ${match}, 位置: ${index}, 原始: ${original}`);
        console.log(result.indexOf('.'))
        return index === result.indexOf('.') ? '.' : '';
    })
}