html不支持地址脱敏，必须由javascript主动处理；直接tofixed(2)截坐标仍属街区级精度，应改用行政区划字符串映射；前端脱敏需依赖地理编码服务或查表，且权限控制必须在后端实现。
HTML 本身不支持地址脱敏，所谓“脱敏显示”必须由 JavaScript 主动截断、替换或映射，不能靠 <meta>、data- 属性或 CSS 隐藏实现——这些都只是摆设，右键“检查元素”就能看到原始地址。
为什么直接用 toFixed(2) 截坐标是错的
有人把 navigator.geolocation 返回的 coords.latitude 和 coords.longitude 直接 .toFixed(2)，以为能模糊到城市级。实际结果可能是：39.91,116.46 仍能精确定位到北京朝阳某商圈，误差不到 1 公里。四舍五入不是脱敏，是假安全。
- 小数点后 2 位 → 约 ±1.1 km 误差（赤道附近），高纬度地区更小，仍属街区级精度
- 真正要“只显示城市”，就得放弃坐标，改用行政区划字符串，比如把
"39.912345,116.456789"映射成"北京市朝阳区" - 映射必须依赖可信地理编码服务（如高德/腾讯地图 API），或离线行政区划树（注意更新时效）
前端做地址脱敏的三种可靠路径
所有方案都基于一个前提：原始详细地址（如“北京市朝阳区建国路8号SOHO现代城C座1205室”）已由后端返回，前端只负责展示层变形。
-
静态替换：用正则粗暴截断，适合内部系统快速上线。例如：
address.replace(/(.*?市.*?区).*?$/, "$1")→ 提取到区级，但无法处理“杭州市西湖区文三路”和“杭州市上城区望江路”的语义差异 - 查表映射：前端预置简版省市县 JSON，按关键词匹配。例如匹配到“朝阳区”就返回“北京市朝阳区”，匹配失败则 fallback 为“北京市”；缺点是覆盖不全、难维护
-
动态调用地理编码 API：把原始地址发给高德
/v3/geocode/geo，参数加city=北京+batch=false，响应里取regeocode.addressComponent.city和district拼接。这是唯一能保证语义准确的方式，但有 QPS 限制和网络延迟
表格中地址字段脱敏的常见翻车点
如果地址在 <table> 里渲染，且需按角色控制精度（如客服看全量、访客只看城市），千万别在前端写 <code>if (role === 'visitor') { showCityOnly() }。
- role 字段可被 localStorage 或控制台篡改，前端判断毫无意义
- 真实脱敏逻辑必须落在后端：接口返回前就决定字段值是“北京市朝阳区”还是“北京市朝阳区建国路8号SOHO现代城C座1205室”
- 若已用前端 JS 处理，至少确保脱敏发生在
innerHTML赋值之前，而不是等 DOM 渲染完再遍历querySelectorAll(".addr")—— 用户会看到 100ms 的明文闪现
地址脱敏最易被忽略的点是：它从来不是纯前端问题。坐标截断、正则提取、甚至“附近城市”文案，背后都需要地理语义支撑。没地理编码服务兜底的“模糊”，大概率只是自我安慰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
