vue2项目中将详细地址转换 为 两段(省市区)(后面的地址)

121 阅读2分钟

​​持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第18天,点击查看活动详情

目录

前言

思路

代码


前言

即 上上上文 点击高德地图随机位置 都能获取到当前点击的经纬度、以及地址,也能把数据传递给表格,但现在又有个需求,就是要求,把已经获取的地址 划分为两段,第一段就是 省市区 ,第二段就是区后面的 位置

思路

提出这个需求,我就想到了一个思路,就是利用字符串的slice进行截取,但在这个过程中发现,slice它的参数,我已经定死了,那随机在点击其他地址,肯定会有偏差,然后又想到,给它加个判断,但是呢,会发现,有的地方没有 “区”这个字,有的地方里面含有两个市,后来我就在咱们博客上,查阅,看到有人用 正则校验写,那我也C过来自己试试,我就使用这里面的省市区的正则,进行填写,

 效果

但是那是,我进入了一个误区,那是一直在想  自己想要的就是 一个字符串, 但它打印出来的确实一个数组,到时候还要进行转换,感觉有些麻烦,就没有使用,就一直在想其他方法,想了老半天,搜了老半天,也一直没有找到自己想要的结果,

没办法,最后求助,朋友马上给我发个链接,但是呢,那个方法也是利用正则校验的方法,但,这时,我已经开窍了,

下面就是一个实现的代码

代码

// 用正则取省市区
      // let newAddress = this.detailedAddress
      //   .replace(/(?<=省)/, ",")
      //   .replace(/(?<=市)/, ",")
      //   .replace(/(?<=区)/, ",")
      //   .split(",");
      // 优化之后
      let newAddress2 = this.detailedAddress
        .replace(/(?<=[省市区])/g, "$&,")
        .split(",");
      // let n = newAddress2.slice(-1).join();
      // let w = newAddress2.slice(0, -1 + 1).join();
      let end = newAddress2.pop();
      let stat = newAddress2.join("");
      console.log("详细地址", end, stat);
      this.station.area = stat;
      this.station.address = end;

打印出来的结果: 目前没贴图,晚点补、

                stat:省市区         end:区或市后面的地址

正则校验

 let newAddress2 = this.detailedAddress
.replace(/(?<=[省市区])/g, "$&,")
.split(",");