替换地址_智障地址识别，前端（含小程序）5分钟集成

场景

最近做一个商城小程序, 服务端没啥问题, 前端这里用户使用过程中要求能够像顺丰小程序一样, 识别地址.

方案一

最简单的方案就是自己撸一套正则, 然后要求用户按照格式输入即可. 这样很快速, 但是容易出问题. 最常见一点, 用户就不按你的规则来咋办? 比如用户的 Excel 表格保存的数据, 可能就保存到地级市, 然后你前端要求精确到"区". 然后你说服务端解决? 显然, 我们这里说的是纯前端方案.

正则参考代码(兼容微信地址库):

简单正则替换

上面就要求用户需要按照: 姓名 [空格] 手机号 [空格] 地址 [空格] 邮编

如果产品可接受, 就拿去用吧.

方案二

找轮子.

GitHub - akebe/address-parse: 对国内地址地区进行智能解析，提取关键数据，如有识别不准的地址请Issues

本来找了两个, 这个直接引用 bundle.js 即可, 较为方便, 就选它了.

使用方法简单, 如下:

1. 拷贝或下载 dist/bundle.js;
2. 如果是网页或 npm 使用则直接看README说明即可;
3. 小程序引用, 将内容放到本地后, const address_parse = require('path_to/address_parse.min') 文件名自己修改, 比如这里我改成了 address_parse.min.js, require 可省略 ".js". 很重要的一步, 由于是小程序 CommonJS 规范, 而源码是支持网页的, 所以内部会有 window 引用, 所以需要在文件内, 将 window.AddressParse 替换成 module.exports, 否则小程序无法成功调用.

之后就可以愉快的按照文档使用了, 放心, 文档很短.

你也可以不看文档, 仿写这里代码即可:

导出的数据结构是这样的, 请自行解构:

完事