javascript 常用方法解析URL,补充前导字符, 省市联动, 循环替换模板

2018-11-7 20:41:20 星期三

1. 解析URL

 1         function parseUrl(url)
 2         {
 3             url = decodeURIComponent(url);
 4             var u = url.split('?');
 5
 6             var args = {};
 7             args['uri'] = u[0];
 8
 9             if (u.length === 2) {
10                 var items = u[1].split("&");
11                 var item = null, name = null, value = null;
12                 for(var i=0; i < items.length; i++){
13                     item = items[i].split("=");
14                     if(item[0]){
15                         name = item[0];
16                         value = item[1] ? item[1] : "";
17                         args[name] = value;
18                     }
19                 }
20             }
21
22             return args;
23         }

2019-4-25 10:44:30 星期四

2. 补充前导字符

 1 //给字符串str补上多个前导字符pad, 最终使str总长为length
 2 function strPad(str, pad, length)
 3 {
 4     var padn = length - str.length;
 5     var pads = '';
 6
 7     for (i =0; i < padn ; i++) {
 8         pads += pad;
 9     }
10
11     return pads + str;
12 }

2019-5-13 14:25:53 星期一

3. 构建URL

 1 function buildUrl(prefix, obj)
 2 {
 3     let param = parseUrl(prefix);
 4     delete param.uri;
 5
 6     for (let i in obj) {
 7         param[i] = obj[i]; //去掉重复的键, 用obj中的覆盖prefix中的
 8     }
 9
10     let arr = [];
11     for (let j in param) {
12         arr.push(j + '=' + param[j]);
13     }
14
15     let str = arr.join('&');
16
17     if (prefix.indexOf('?') !== -1) {
18         let u =prefix.split('?');
19         return u[0] + '?' + str;
20     } else {
21         return prefix + '?' + str;
22     }
23 }

View Code

2019-5-21 19:35:24 星期二

4. 国省市县联动

  1 var countryLength = 3; //国家编号的长度
  2 var provinceLength = 2; //省编号的长度
  3 var cityLength = 2; //城市编号的长度
  4 var areaLength = 2; //县区编号的长度
  5 var _countryList = ''; //国家: {001000000:"中国", ...}
  6 var _provinceList = ''; //省/州: {001010000:"河南省", ...}
  7 var _cityList = ''; //城市: {001010100:"南阳市", ...}
  8 var _areaList = ''; //县区: {001010101:"赊店", ...}
  9
 10 var _blankOption = '<option label="" value=""></option>';
 11 var _tplOption = '<option label="{label}" value="{value}">{text}</option>';
 12
 13 $.ajax({
 14     type :"get",
 15     url :'getCountryProvinceCity',
 16     dataType: 'json',
 17     async :false,
 18     success :function(data){
 19         _countryList = data.country_list;
 20         _provinceList = data.province_list;
 21         _cityList = data.city_list;
 22         _areaList = data.area_list;
 23     }
 24 });
 25
 26 clearProvince('country', 'province', 'city', 'area'); //清除掉下拉列表中不关联的省市县
 27
 28 //cpc: country province city
 29 //国家变动事件
 30 function cpcChangeCountry(countryId, provinceId) {
 31     var country = $("#"+countryId).val(); //新选择的国家
 32     var provinceDom = $("#"+provinceId);
 33
 34     var provinceHtml = _blankOption;
 35     var tmp='';
 36     for (code in _provinceList) {
 37         var prefix1 = strPad(country, '0', countryLength);
 38         var prefix2 = code.substring(0, countryLength);
 39
 40         if (prefix1 === prefix2) {
 41             tmp = _tplOption;
 42             tmp = tmp.replace('{label}', _provinceList[code]);
 43             tmp = tmp.replace('{value}', code);
 44             tmp = tmp.replace('{text}', _provinceList[code]);
 45             provinceHtml += tmp;
 46         }
 47     }
 48
 49     provinceDom.html(provinceHtml);
 50 }
 51
 52 //省份变动事件
 53 function cpcChangeProvince(provinceId, cityId) {
 54     var province = $("#"+provinceId).val(); //新选择的省份
 55     var cityDom = $("#"+cityId);
 56
 57     var len = countryLength+provinceLength;
 58     var provincePrefix = province.substring(0, len);
 59
 60     var cityHtml = _blankOption;
 61     var tmp = '';
 62     for (code in _cityList) {
 63         var cityPrefix = code.substring(0, len);
 64         if (provincePrefix === cityPrefix) {
 65             tmp = _tplOption;
 66             tmp = tmp.replace('{label}', _cityList[code]);
 67             tmp = tmp.replace('{value}', code);
 68             tmp = tmp.replace('{text}', _cityList[code]);
 69             cityHtml += tmp;
 70         }
 71     }
 72
 73     cityDom.html(cityHtml);
 74 }
 75
 76 //城市变动事件
 77 function cpcChangeCity(cityId, areaId) {
 78
 79     var city = $("#"+cityId).val(); //选择的城市
 80     var areaDom = $("#"+areaId);
 81
 82     var len = countryLength+provinceLength+cityLength;
 83     var cityPrefix = city.substring(0, len);
 84
 85     var areaHtml = _blankOption; //默认值
 86     var tmp = '';
 87     for (code in _areaList) {
 88         var areaPrefix = code.substring(0, len);
 89         if (cityPrefix === areaPrefix) {
 90             tmp = _tplOption;
 91             tmp = tmp.replace('{label}', _areaList[code]);
 92             tmp = tmp.replace('{value}', code);
 93             tmp = tmp.replace('{text}', _areaList[code]);
 94             areaHtml += tmp;
 95         }
 96     }
 97
 98     areaDom.html(areaHtml);
 99 }
100
101 //给字符串str补上前导字符pad, 最终使str总长为length
102 function strPad(str, pad, length)
103 {
104     var padn = length - str.length;
105     var pads = '';
106
107     for (i =0; i < padn ; i++) {
108         pads += pad;
109     }
110
111     return pads + str;
112 }
113
114 //刚进入编辑页面时, 去掉省份,城市中与当前国家无关的选项
115 function clearProvince(countryId, provinceId, cityId, areaId) {
116     var country = $("#"+countryId).val(); //当前选择的国家
117     var provinceDom = $("#"+provinceId);
118     var cityDom = $("#"+cityId);
119     var areaDom = $("#"+areaId);
120     var province = provinceDom.val();
121     var city = cityDom.val();
122
123
124     if (country) {
125         //删除省份中不属于国家的
126         for (code in _provinceList) {
127             let prefix1 = strPad(country, '0', countryLength);
128             let prefix2 = code.substring(0, countryLength);
129
130             if (code.length> 0 && prefix1 !== prefix2) {
131                 provinceDom.find("option[value='"+code+"']").remove();
132             }
133         }
134
135         //删除城市中不属于省份的
136         for (code in _cityList) {
137             let prefix1 = province.substring(0, countryLength+provinceLength);
138             let prefix2 = code.substring(0, countryLength+provinceLength);
139
140             if (code.length> 0 && prefix1 !== prefix2) {
141                 cityDom.find("option[value='"+code+"']").remove();
142             }
143         }
144
145         //删除区县中不属于城市的
146         for (code in _areaList) {
147             let prefix1 = city.substring(0, countryLength+provinceLength+cityLength);
148             let prefix2 = code.substring(0, countryLength+provinceLength+cityLength);
149
150             if (code.length> 0 && prefix1 !== prefix2) {
151                 areaDom.find("option[value='"+code+"']").remove();
152             }
153         }
154     }
155 }

View Code

2019-6-5 9:26:52 星期三

5. 循环生成模板

 1 function repeat(selector, arr) {
 2     let tplDom = $(selector);
 3     let tpl = tplDom[0].outerHTML;
 4     let out = '';
 5     for (i in arr) {
 6         let map = arr[i];
 7         let tmp = tpl;
 8         for (let j in map) {
 9             let re = new RegExp('{' + j + '}', 'g');
10             tmp = tmp.replace(re, map[j]);
11         }
12         out += tmp;
13     }
14
15     tplDom.replaceWith(out);
16 }

View Code

转载于:https://www.cnblogs.com/iLoveMyD/p/9925553.html

javascript 常用方法解析URL,补充前导字符, 省市联动, 循环替换模板相关推荐

取出url中的字符_如何在JavaScript中解析URL：例如主机名，路径名，查询，哈希？...
统一资源定位符(缩写URL)是对Web资源(网页,图像,文件)的引用.URL指定资源位置和检索资源的机制(http,ftp,mailto). 例如,这是此博客文章的URL: 通常,您需要访问URL的特 ...
JavaScript数组常用方法解析和深层次js数组扁平化
前言数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...
javascript基础系列：数组常用方法解析
javascript基础系列:数组常用方法解析今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...
解析JavaScript中的字符串类型与字符编码支持
JavaScript中的字符串也像Python那样支持反斜杠的转移,并且字符集方面默认为Unicode,下面就来详细解析JavaScript中的字符串类型与字符编码支持定义字符串就是零个或多个排在 ...
通过url,获取html内容,并解析,如何使用 JavaScript 解析 URL
在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点. 开始创建一个以下内容的 HTML 文件,并在浏览器中打开. JavaScript URL parsin ...
js常用方法，JS实用方法，jq获得文件后缀，解析window。location，解析URL参数
jq获取文件后缀的方法 var file = "测试文档1111111111.docx"; // 文件 var fileName = file.replace(/.*(\/|\\) ...
es6删除数组某一项_javascript基础系列：数组常用方法解析
javascript基础系列:数组常用方法解析今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...
es6删除数组某项_javascript基础系列：数组常用方法解析
javascript基础系列:数组常用方法解析今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...
解析URL得到IP地址
导读上一篇总结中涉及到的是输入URL的过程中浏览器做出的一些反馈,这一篇将总结之后发生的事情. 浏览器判断是URL还是搜索关键字解析URL DNS解析获得IP地址多IP域名DNS查询解决方案什 ...
Javascript中的url编码与解码(详解)
摘要本文主要针对URI编解码的相关问题做了介绍,对url编码中哪些字符需要编码.为什么需要编码做了详细的说明,并对比分析了Javascript中和编解码相关的几对函数escape / unescap ...

javascript 常用方法解析URL,补充前导字符, 省市联动, 循环替换模板

javascript 常用方法解析URL,补充前导字符, 省市联动, 循环替换模板相关推荐

最新文章

热门文章

javascript 常用方法 解析URL,补充前导字符, 省市联动, 循环替换模板

javascript 常用方法 解析URL,补充前导字符, 省市联动, 循环替换模板相关推荐

最新文章

热门文章

javascript 常用方法解析URL,补充前导字符, 省市联动, 循环替换模板

javascript 常用方法解析URL,补充前导字符, 省市联动, 循环替换模板相关推荐