最稳妥的身份证号格式化方式是前端用JavaScript做视觉分离，只改变显示效果而不修改原始值，需处理实时输入、粘贴、光标定位及第18位加权校验。
身份证号在网页中直接显示一长串数字，既不便于阅读，也不符合国内用户习惯。最稳妥的格式化方式是用 JavaScript 在前端做「视觉分离」，不改变原始值，只控制显示效果。
用 input 的 oninput 实时格式化输入
用户边输边加空格或短横线（如 110101 19900307 251X 或 110101-19900307-251X），关键在于：只修改显示值，保留原始 value 用于提交；避免光标跳动；兼容粘贴场景。
- 监听
oninput而非onchange，保证每次按键都响应 - 先用
.replace(/\D/g, '')清除所有非数字字符，再按 6-8-4-1 分段插入分隔符 - 手动保存并恢复光标位置，否则在中间编辑时会跳到末尾（Chrome 尤其明显）
- 对粘贴内容做同样清洗和重格式化，防止用户粘贴带空格/字母的乱码
示例逻辑片段：
input.addEventListener('input', function() {
const raw = this.value.replace(/\D/g, '');
if (raw.length <= 18) {
let formatted = raw;
if (raw.length > 6) formatted = raw.slice(0, 6) + ' ' + raw.slice(6);
if (raw.length > 14) formatted = raw.slice(0, 6) + ' ' + raw.slice(6, 14) + ' ' + raw.slice(14);
if (raw.length > 17) formatted = raw.slice(0, 6) + ' ' + raw.slice(6, 14) + ' ' + raw.slice(14, 17) + ' ' + raw.slice(17);
this.value = formatted;
}
});
用 output 或 span 做只读格式化展示
后端返回纯数字身份证号（如 11010119900307251X），前端只负责美观呈现，不参与输入逻辑。这是最轻量、最安全的做法。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 优先用
<output>标签（语义正确，天然不可编辑） - 格式统一为
110101 19900307 251X（空格分隔，符合公安系统常见打印样式） - 注意末位校验码可能是
X或x，显示前转成大写更规范 - 避免用 CSS
letter-spacing或伪元素模拟分隔——无法复制、不利于无障碍访问
示例：
<output id="idcard-display"></output>
<script>
const id = '11010119900307251x';
const formatted = id.replace(/^(\d{6})(\d{8})(\d{3})(\d|X|x)$/, '$1 $2 $3 $4').toUpperCase();
document.getElementById('idcard-display').textContent = formatted;
</script>
正则校验不能只靠格式，必须做第 18 位加权校验
仅用 /^\d{6}\d{8}\d{3}[\dXx]$/ 这类正则判断长度和字符，等于没校验。真实身份证第 18 位是通过前 17 位加权模 11 算出来的，错一位就无效。
- 前端可做完整校验（有成熟算法，几十行 JS 即可），但必须和后端校验逻辑一致
- 校验失败时，不要只提示“格式错误”，应明确指出“校验码不匹配”
- 若仅用于展示（非注册/实名环节），可跳过校验，但需注明“仅作格式化，不验证真伪”
- 注意：15 位老身份证已基本停用，当前业务如无历史数据兼容需求，无需处理
真正难的不是加空格，而是保持原始数据纯净、光标稳定、校验可靠。很多项目卡在粘贴后格式错乱或提交时多出空格，根源都在没把「显示」和「值」彻底分开。
