js-原生Js汉语拼音首字母匹配城市名

原生Js汉语拼音首字母匹配城市名

2018-04-10 09:49:30 luck_lin 阅读数 1520更多

分类专栏： javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qwe502763576/article/details/79876451

placeData.js：

 

  1. var cityData = ['北京|beijing|bj','上海|shanghai|sh', '重庆|chongqing|cq', '深圳|shenzhen|sz', '广州|guangzhou|gz', '杭州|hangzhou|hz',

  2. '南京|nanjing|nj', '苏州|shuzhou|sz', '天津|tianjin|tj', '成都|chengdu|cd', '南昌|nanchang|nc', '三亚|sanya|sy','青岛|qingdao|qd',

  3. '厦门|xiamen|xm', '西安|xian|xa','长沙|changsha|cs','合肥|hefei|hf','西藏|xizang|xz', '内蒙古|neimenggu|nmg', '安庆|anqing|aq', '阿泰勒|ataile|atl', '安康|ankang|ak',

  4. '阿克苏|akesu|aks', '包头|baotou|bt', '北海|beihai|bh', '百色|baise|bs','保山|baoshan|bs', '长治|changzhi|cz', '长春|changchun|cc', '常州|changzhou|cz', '昌都|changdu|cd',

  5. '朝阳|chaoyang|cy', '常德|changde|cd', '长白山|changbaishan|cbs', '赤峰|chifeng|cf', '大同|datong|dt', '大连|dalian|dl', '达县|daxian|dx', '东营|dongying|dy', '大庆|daqing|dq', '丹东|dandong|dd',

  6. '大理|dali|dl', '敦煌|dunhuang|dh', '鄂尔多斯|eerduosi|eeds', '恩施|enshi|es', '福州|fuzhou|fz', '阜阳|fuyang|fy', '贵阳|guiyang|gy',

  7. '桂林|guilin|gl', '广元|guangyuan|gy', '格尔木|geermu|gem', '呼和浩特|huhehaote|hhht', '哈密|hami|hm',

  8. '黑河|heihe|hh', '海拉尔|hailaer|hle', '哈尔滨|haerbin|heb', '海口|haikou|hk', '黄山|huangshan|hs', '邯郸|handan|hd',

  9. '汉中|hanzhong|hz', '和田|hetian|ht', '晋江|jinjiang|jj', '锦州|jinzhou|jz', '景德镇|jingdezhen|jdz',

  10. '嘉峪关|jiayuguan|jyg', '井冈山|jinggangshan|jgs', '济宁|jining|jn', '九江|jiujiang|jj', '佳木斯|jiamusi|jms', '济南|jinan|jn',

  11. '喀什|kashi|ks', '昆明|kunming|km', '康定|kangding|kd', '克拉玛依|kelamayi|klmy', '库尔勒|kuerle|kel', '库车|kuche|kc', '兰州|lanzhou|lz',

  12. '洛阳|luoyang|ly', '丽江|lijiang|lj', '林芝|linzhi|lz', '柳州|liuzhou|lz', '泸州|luzhou|lz', '连云港|lianyungang|lyg', '黎平|liping|lp',

  13. '连成|liancheng|lc', '拉萨|lasa|ls', '临沧|lincang|lc', '临沂|linyi|ly', '芒市|mangshi|ms', '牡丹江|mudanjiang|mdj', '满洲里|manzhouli|mzl', '绵阳|mianyang|my',

  14. '梅县|meixian|mx', '漠河|mohe|mh', '南充|nanchong|nc', '南宁|nanning|nn', '南阳|nanyang|ny', '南通|nantong|nt', '那拉提|nalati|nlt',

  15. '宁波|ningbo|nb', '攀枝花|panzhihua|pzh', '衢州|quzhou|qz', '秦皇岛|qinhuangdao|qhd', '庆阳|qingyang|qy', '齐齐哈尔|qiqihaer|qqhe',

  16. '石家庄|shijiazhuang|sjz', '沈阳|shenyang|sy', '思茅|simao|sm', '铜仁|tongren|tr', '塔城|tacheng|tc', '腾冲|tengchong|tc', '台州|taizhou|tz',

  17. '通辽|tongliao|tl', '太原|taiyuan|ty', '威海|weihai|wh', '梧州|wuzhou|wz', '文山|wenshan|ws', '无锡|wuxi|wx', '潍坊|weifang|wf', '武夷山|wuyishan|wys', '乌兰浩特|wulanhaote|wlht',

  18. '温州|wenzhou|wz', '乌鲁木齐|wulumuqi|wlmq', '万州|wanzhou|wz', '乌海|wuhai|wh', '兴义|xingyi|xy', '西昌|xichang|xc', '襄樊|xiangfan|xf',

  19. '西宁|xining|xn', '锡林浩特|xilinhaote|xlht', '西双版纳|xishuangbanna|xsbn', '徐州|xuzhou|xz', '义乌|yiwu|yw', '永州|yongzhou|yz', '榆林|yulin|yl', '延安|yanan|ya', '运城|yuncheng|yc',

  20. '烟台|yantai|yt', '银川|yinchuan|yc', '宜昌|yichang|yc', '宜宾|yibin|yb', '盐城|yancheng|yc', '延吉|yanji|yj', '玉树|yushu|ys', '伊宁|yining|yn', '珠海|zhuhai|zh', '昭通|zhaotong|zt',

  21. '张家界|zhangjiajie|zjj', '舟山|zhoushan|zs', '郑州|zhengzhou|zz', '中卫|zhongwei|zw', '芷江|zhijiang|zj', '湛江|zhanjiang|zj'];

  22.  
  23.  

  24. var iCity = {

  25. cityClass : function(){ //城市分类

  26. if(!this.citys){

  27. //{HOT:{hot:[],ABCDEFG:{a:[1,2,3],b:[1,2,3]},HJKLMN:{},PQST:{},VWXYZ:{}}

  28. this.citys = {"hotCity":[],"ABCDEFG":{},"HJKLMN":{},"PQST":{},"WXYZ":{}};

  29. var make,fn,name,

  30. reg1 = /^[a-g]$/i, reg2 = /^[h-n]$/i, reg3 = /^[o-u]$/i,reg4 = /^[v-z]$/i;

  31.  

  32. for(var i in cityData){

  33. make = cityData[i].split("|"); //分割成数组

  34. fn = make[2].substring(0,1).toUpperCase(); //获取英文第一个字母转换成大写

  35. name = make[0];

  36. if(reg1.test(fn)){

  37. if(!this.citys.ABCDEFG[fn]) this.citys.ABCDEFG[fn]=[];

  38. this.citys.ABCDEFG[fn].push(name)

  39. }else if(reg2.test(fn)){

  40. if(!this.citys.HJKLMN[fn]) this.citys.HJKLMN[fn]=[];

  41. this.citys.HJKLMN[fn].push(name)

  42. }else if(reg3.test(fn)){

  43. if(!this.citys.PQST[fn]) this.citys.PQST[fn]=[];

  44. this.citys.PQST[fn].push(name)

  45. }else if(reg4.test(fn)){

  46. if(!this.citys.WXYZ[fn]) this.citys.WXYZ[fn]=[];

  47. this.citys.WXYZ[fn].push(name)

  48. }

  49. if(i<20) this.citys.hotCity.push(name);

  50. }

  51. }

  52. }

  53. }

  54. iCity.cityClass();

  55. export default iCity.citys;

react组件：

 

  1. import React, {Component} from 'react';

  2. import data from './placeData';

  3.  

  4. import {

  5. Link //模板切换的组件

  6. } from 'react-router-dom';

  7.  

  8. class PlaceMain extends Component{

  9. render(){

  10. let pathname = this.props.currentPath;//获取当前请求该组件luyou，以便于点击后携带参数往哪个路由跳转

  11.  

  12. let ABCDEFG = data.ABCDEFG;

  13. let arrABCDEFG = [];

  14. [].slice.call('ABCDEFG').forEach(v=>{

  15. arrABCDEFG = arrABCDEFG.concat(ABCDEFG[v]);

  16. })

  17. arrABCDEFG.title = "ABCDEFG";

  18.  

  19. let HJKLMN = data.HJKLMN;

  20. let arrHJKLMN = [];

  21. [].slice.call('HJKLMN').forEach(v=>{

  22. arrHJKLMN = arrHJKLMN.concat(HJKLMN[v]);

  23. })

  24. arrHJKLMN.title = "HJKLMN";

  25.  

  26. let PQST = data.PQST;

  27. let arrPQST = [];

  28. [].slice.call('PQST').forEach(v=>{

  29. arrPQST = arrPQST.concat(PQST[v]);

  30. })

  31. arrPQST.title = "PQST";

  32.  

  33. let WXYZ = data.WXYZ;

  34. let arrWXYZ = [];

  35. [].slice.call('WXYZ').forEach(v=>{

  36. arrWXYZ = arrWXYZ.concat(WXYZ[v]);

  37. })

  38. arrWXYZ.title = "WXYZ";

  39. let hotCity = data.hotCity;

  40. hotCity.title = "热门城市";

  41. let AllCity =[hotCity, arrABCDEFG, arrHJKLMN, arrPQST, arrWXYZ].map((v, i)=>{

  42. return(

  43. <dl key={i}>

  44. <dt>{v.title}</dt>

  45. <dd>

  46. {v.map((val, idx)=>{

  47. return <Link key={idx} to={ {pathname, state: {place: val}} }>{val}</Link>

  48. })}

  49. </dd>

  50. </dl>

  51. )

  52. })

  53. return(

  54. <main>

  55. {AllCity}

  56. </main>

  57. )

  58. }

  59. }

  60. export default PlaceMain;

  61.  

 

 

posted @ 2019-11-08 09:58  grj001  阅读(229)  评论(0)  编辑  收藏  举报