Vue项目中实现地址信息的智能解析

一：需求描述

在添加收货地址时，为了方便代理下单（因为代理都是下各种不同地址的订单，输入地址的时候，是否可以直接复制粘贴 整个，智能识别，或者  直接读取粘贴的内容）
1

二: 具体实现

经过研究和查资料，在GitHub上知道一个开源的项目,实现国内地址地区智能解析,无需完整地址也能正确匹配
1

接下来介绍下我的具体实现

• install

  cd  你的项目的目录下
  
  npm 安装 开发时依赖
  npm install address-pares --save 
  1
  2
  3
  4

  start

  import 引入地址解析实例
  import AddressParse from ''address-parse'';
  1
  2

  在data中定义属性用来接收用户填入的地址信息
  1

  data(){
  	return{
  		AddressInfo:{},  //解析获得地址信息
  		message:''''       //接受用户输入的地址信息
  	}
  }
  1
  2
  3
  4
  5
  6

  前端页面的显示,这里使用的是vant组件
  1

  	 <!--智能解析框-->
        <div class="addressBox">
            <van-cell-group>
                <van-field
                        v-model="message"
                        rows="4"
                        border
                        label-align="center"
                        autosize
                        type="textarea"
                        maxlength="180"
                        placeholder="智能解析：粘贴或者输入整段文字，自动识别姓名、号码、地址，如：段佳佳13112345678浙江省杭州市西湖区某某路某某某大厦001号"
                        show-word-limit
                />
            </van-cell-group>
            <div class="parse-btn">
                <van-button style="background-color: #f6f6f6;margin-right: 20px;border:none;"  plain size="small" @click="clean">清空</van-button>
                <van-button round type="info" size="small" color="red" @click="parseAddress">智能解析</van-button>
            </div>
  
        </div>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21

  	前端页面如下图所示
  1

  

  methods中实现方法
  1

   clean(){
      this.message = ''''
        console.log(this.message)
    } ,
    parseAddress(){
      console.log(this.message)
        /*判断解析的地址内容不为空*/
        if(this.message != ''''){
            const result = AddressParse.parse(this.message);
            console.log(result);
            console.log(result[0].province);
            console.log(result[0].city);
            console.log(result[0].area);
            console.log(result[0].details);
            console.log(result[0].mobile);
            console.log(result[0].code);
            this.AddressInfo = {
  
                ''name'':result[0].name,
                ''tel'':result[0].mobile,
                ''province'':result[0].province,
                ''city'':result[0].city,
                ''county'':result[0].area,
                ''addressDetail'':result[0].details,
                ''areaCode'':result[0].code,
                ''postalCode'':result[0].zip_code,
            }
        }else {
            console.log(''请输入你要解析的地址'')
            Toast.fail(''请输入您要解析的地址信息'');
        }
  
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33

  以上操作,就会将用户输入的例如:段佳佳13112345678浙江省杭州市西湖区某某路某某某大厦001号,解析成你要的字段,将其放到对应的输入框保存即可。
  这里附上GitHub地址https://github.com/akebe/address-parse 刚开始写,大家给个赞,我就更有动力了.