VUE实现 类似收获地址自动识别 并且关联到对应的省市区

前段时间做需求， 要求做一个京东淘宝那样客户粘贴地址之后，自动识别省县区三级的地址，本来可以在后端进行做的，但是呢（主要是存在地址省县区不能为空，且详细地址也不能为空的校验），为了减少不必要的调度，就决定全部放在前端做了，并且做起来也挺不错的。话不多说直接上代码。主要分几个模块。

因为本人是后端开发人员，所以前端代码写的有些拉胯，各位大佬拿回去之后可以去进行优化一下，相信问题不大。

region.json 太长了，就不方便粘贴到这里面了， 需要的就直接点击下面的下载，或者网上其他地方都可以进行下载（网上有大量的）

region.json-其它文档类资源-CSDN下载

longest.js， 最长子串的最佳匹配算法， 这个JS也是在网上找到的， 大家可以去找找

/**
 * 最长子串
 * 输入 ['weeweadbshow', 'jhsaasrbgddbshow', 'ccbshow'] 输出 bshow
 * @param {string[]} sourceArr
 * @return {string}
 */
 export function longest(sourceArr) {
    // 字符串长度排序，优先选择最短的字符串，尽可能的减少性能开支
    sourceArr = string_ArraySort(sourceArr)
    const wholeArr = [] // 最短字符串所能产生的所有子串
    const firstStr = sourceArr.shift() // 以最短子串为基准
    let count = 0 // 结果长度
    let result = '' // 结果
  
    // 截取子串
    for (let i = 0; i < firstStr.length; i++) {
      for (let j = i + 1; j <= firstStr.length; j++) {
        wholeArr.push(firstStr.substring(i, j))
      }
    }
  
    // 遍历所有的子串
    for (let i = 0; i < wholeArr.length; i++) {
      let AllArray = [] // 建立一个结果过渡数组
  
      // 使用正则表达式来检索其他的字符串
      const patt = new RegExp(wholeArr[i])
      for (let j = 0; j < sourceArr.length; j++) {
        const reArr = sourceArr[j].match(patt) // 使用正则表达式来检索，match 函数直接返回结果
        if (reArr) { // 如果没检索到，返回一个false值，如果匹配到就返回结果
          AllArray = AllArray.concat(reArr) // 向结果过渡函数添加值
        }
      }
  
      if (AllArray.length === sourceArr.length) { // 验证是否在其他字符串中是否都匹配到了子串
        if (AllArray[0].length > count) {
          // 过渡结果
          count = AllArray[0].length
          result = AllArray[0]
        }
      }
    }
    return result
  }
  
  // 根据字符串长度排序
  function string_ArraySort(strArr) {
    return strArr.sort(function(str1, str2) {
      return str1.length - str2.length
    })
  }
  
  

以上就是组件构造的全部内容了，其实形式还是蛮简单的，外边的组件引用就是

// 需要引入这个组件的路径
// 需要定义这个组件

展示效果大概就是下面这个样子： 

 

各位大佬有什么问题请在下方留言。大家可以一起探讨一下。