简介
addressr 是一个针对地址字符串进行解析的 npm 包，能够将字符串形式的地址转化为结构化数据，例如将 "上海市浦东新区张江镇盛夏路508弄88号502室" 转化为 {province: 上海市, city: 上海市, district: 浦东新区, town: 张江镇, detail: 盛夏路508弄88号502室}。这个 npm 包可以极大地简化前端地址输入校验等相关工作，提高应用的开发效率。
安装
npm install addressr
使用
引入
import addressr from 'addressr';
解析
addressr 提供了一个 parse 方法来进行地址解析，该方法输入一个地址字符串，返回一个结构化的地址对象。
const addressString = "上海市浦东新区张江镇盛夏路508弄88号502室"; const addressObject = addressr.parse(addressString); console.log(addressObject);
输出结果：
{
province: '上海市',
city: '上海市',
district: '浦东新区',
town: '张江镇',
detail: '盛夏路508弄88号502室'
}校验
除了解析外，addressr 还提供了一个 validate 方法来进行地址合法性校验。该方法输入一个结构化地址对象，返回一个布尔值，表示该地址是否合法。
const addressString = "上海市浦东新区张江镇盛夏路508弄88号502室"; const addressObject = addressr.parse(addressString); const isValid = addressr.validate(addressObject); console.log(isValid);
输出结果：
true
示例
下面给出一个基于 addressr 的地址输入组件示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- -----------
----- ------------ - -- -- -
----- --------------- ----------------- - -------------
----- --------------- ----------------- - ---------------
----- --------- ----------- - ---------------
----- ------------------------- - ------- -- -
-------------------------------------
----- ------------------- - -----------------------------------
----- -------------- - ---------------------------------------
--------------------------------------
---------------------------
--
------ -
-----
------ ----------- --------------------- ------------------------------------ --
--------- -- -------------------
-------------- -- -
-----
---------------------------- - ------------------ - ---------------------- - -------------------------
---------------------------------
------
--
------
--
--
------ ------- -------------这是一个基于 React 的地址输入组件，该组件输入一个地址字符串，将其解析为结构化地址对象，并进行合法性校验。如果地址格式不正确，则会提示用户格式错误；如果地址格式正确，则会将其结构化后的地址信息展示在界面上。
总结
addressr 是一个非常实用的 npm 包，能够大大简化前端应用中地址处理相关的工作。在使用 addressr 时，需要注意其提供的两个方法 parse 和 validate 的使用。同时，应该结合实际场景，进行相关的组件开发和封装。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005674181e8991b448e3c67