如何在输入框中格式化法国手机号（含+33开头格式）

实现思路 #

针对两种法国手机号格式，分情况处理：

• 0开头号码：输入0XXXXXXXXX（10位数字），格式化为0X XX XX XX XX
• +33开头号码：输入+33XXXXXXXXX（+33加9位数字），格式化为+33 X XX XX XX XX

核心逻辑是先清理输入内容，再根据号码前缀匹配对应的格式化规则，同时优化实时输入时的光标位置，保证用户体验。

代码实现（JavaScript） #

// 格式化法国手机号的核心函数
function formatFrenchPhone(input) {
    // 清理输入：仅保留+号和数字，过滤其他无效字符
    const cleaned = input.replace(/[^+\d]/g, '');

    // 处理+33开头的号码
    if (cleaned.startsWith('+33')) {
        const digits = cleaned.slice(3);
        // 将后续数字按「X XX XX XX XX」分组，再拼接前缀
        const groupedDigits = digits.replace(/(\d)(?=(\d{2})+$)/g, '$1 ')
                                    .replace(/(\d{2})(?=\d)/g, '$1 ')
                                    .trim();
        return `+33 ${groupedDigits}`;
    }
    // 处理0开头的号码
    else if (cleaned.startsWith('0')) {
        const digits = cleaned.slice(1);
        // 沿用你原有的正则，将后续数字每两位分组
        return `0${digits.replace(/\B(?=(\d{2})+(?!\d))/g, ' ')}`;
    }
    // 未匹配前缀时，返回清理后的原始内容（适配输入过程中的半完成状态）
    else {
        return cleaned;
    }
}

// 绑定到输入框的实时格式化事件
const phoneInput = document.getElementById('phone-input');
phoneInput.addEventListener('input', function(e) {
    const originalValue = e.target.value;
    const formattedValue = formatFrenchPhone(originalValue);

    // 保存并调整光标位置，避免格式化后光标跳至末尾
    const cursorPos = e.target.selectionStart;
    const charDiff = formattedValue.length - originalValue.length;
    e.target.value = formattedValue;
    e.target.setSelectionRange(cursorPos + charDiff, cursorPos + charDiff);
});

关键细节说明 #

1. 输入清理：先过滤非+和数字的字符，避免无效内容干扰格式化逻辑
2. 分情况处理：通过startsWith判断前缀，分别应用不同的分组规则
3. 光标位置优化：实时输入时计算格式化前后的字符长度差，调整光标位置，提升输入体验
4. 半完成状态适配：用户输入未完成时，返回清理后的内容，不会强行格式化不完整号码

简化版正则实现（仅针对完整号码） #

如果只需要处理完整的10位（0开头）或11位（+33开头）号码，可以用分支正则直接匹配替换：

function formatFullFrenchPhone(input) {
    const cleaned = input.replace(/[^+\d]/g, '');
    return cleaned.replace(
        /^(\+33)(\d)(\d{2})(\d{2})(\d{2})(\d{2})$|^0(\d)(\d{2})(\d{2})(\d{2})(\d{2})$/,
        (match, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10) => {
            return p1 ? `${p1} ${p2} ${p3} ${p4} ${p5} ${p6}` : `0${p7} ${p8} ${p9} ${p10}`;
        }
    );
}

内容的提问来源于stack exchange，提问作者Ali