javascript 常用方法 解析URL,补充前导字符

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

1. 解析URL

         function parseUrl(url)
         {
             url = decodeURIComponent(url);
             var u = url.split('?');

             var args = {};
             args['uri'] = u[0];

             if (u.length === 2) {
                 var items = u[1].split("&");
                 var item = null, name = null, value = null;
                 for(var i=0; i < items.length; i++){
                     item = items[i].split("=");
                     if(item[0]){
                         name = item[0];
                         value = item[1] ? item[1] : "";
                         args[name] = value;
                     }
                 }
             }

             return args;
         }    

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

2. 补充前导字符

 //给字符串str补上多个前导字符pad, 最终使str总长为length
 function strPad(str, pad, length)
 {
     var padn = length - str.length;
     var pads = '';

     for (i =0; i < padn ; i++) {
         pads += pad;
     }

     return pads + str;
 }

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

3. 构建URL

 function buildUrl(prefix, obj)
 {
     let param = parseUrl(prefix);
     delete param.uri;

     for (let i in obj) {
         param[i] = obj[i]; //去掉重复的键, 用obj中的覆盖prefix中的
     }

     let arr = [];
     for (let j in param) {
         arr.push(j + '=' + param[j]);
     }

     let str = arr.join('&');

     if (prefix.indexOf('?') !== -1) {
         let u =prefix.split('?');
         return u[0] + '?' + str;
     } else {
         return prefix + '?' + str;
     }
 }

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

4. 国省市县联动

 var countryLength = 3; //国家编号的长度
 var provinceLength = 2; //省编号的长度
 var cityLength = 2; //城市编号的长度
 var areaLength = 2; //县区编号的长度
 var _countryList = ''; //国家: {001000000:"中国", ...}
 var _provinceList = ''; //省/州: {001010000:"河南省", ...}
 var _cityList = ''; //城市: {001010100:"南阳市", ...}
 var _areaList = ''; //县区: {001010101:"赊店", ...}

 var _blankOption = '<option label="" value=""></option>';
 var _tplOption = '<option label="{label}" value="{value}">{text}</option>';

 $.ajax({
     type :"get",
     url :'getCountryProvinceCity',
     dataType: 'json',
     async :false,
     success :function(data){
         _countryList = data.country_list;
         _provinceList = data.province_list;
         _cityList = data.city_list;
         _areaList = data.area_list;
     }
 });

 clearProvince('country', 'province', 'city', 'area'); //清除掉下拉列表中不关联的省市县

 //cpc: country province city
 //国家变动事件
 function cpcChangeCountry(countryId, provinceId) {
     var country = $("#"+countryId).val(); //新选择的国家
     var provinceDom = $("#"+provinceId);

     var provinceHtml = _blankOption;
     var tmp='';
     for (code in _provinceList) {
         var prefix1 = strPad(country, '0', countryLength);
         var prefix2 = code.substring(0, countryLength);

         if (prefix1 === prefix2) {
             tmp = _tplOption;
             tmp = tmp.replace('{label}', _provinceList[code]);
             tmp = tmp.replace('{value}', code);
             tmp = tmp.replace('{text}', _provinceList[code]);
             provinceHtml += tmp;
         }
     }

     provinceDom.html(provinceHtml);
 }

 //省份变动事件
 function cpcChangeProvince(provinceId, cityId) {
     var province = $("#"+provinceId).val(); //新选择的省份
     var cityDom = $("#"+cityId);

     var len = countryLength+provinceLength;
     var provincePrefix = province.substring(0, len);

     var cityHtml = _blankOption;
     var tmp = '';
     for (code in _cityList) {
         var cityPrefix = code.substring(0, len);
         if (provincePrefix === cityPrefix) {
             tmp = _tplOption;
             tmp = tmp.replace('{label}', _cityList[code]);
             tmp = tmp.replace('{value}', code);
             tmp = tmp.replace('{text}', _cityList[code]);
             cityHtml += tmp;
         }
     }

     cityDom.html(cityHtml);
 }

 //城市变动事件
 function cpcChangeCity(cityId, areaId) {

     var city = $("#"+cityId).val(); //选择的城市
     var areaDom = $("#"+areaId);

     var len = countryLength+provinceLength+cityLength;
     var cityPrefix = city.substring(0, len);

     var areaHtml = _blankOption; //默认值
     var tmp = '';
     for (code in _areaList) {
         var areaPrefix = code.substring(0, len);
         if (cityPrefix === areaPrefix) {
             tmp = _tplOption;
             tmp = tmp.replace('{label}', _areaList[code]);
             tmp = tmp.replace('{value}', code);
             tmp = tmp.replace('{text}', _areaList[code]);
             areaHtml += tmp;
         }
     }

     areaDom.html(areaHtml);
 }

 //给字符串str补上前导字符pad, 最终使str总长为length
 function strPad(str, pad, length)
 {
     var padn = length - str.length;
     var pads = '';

     for (i =0; i < padn ; i++) {
         pads += pad;
     }

     return pads + str;
 }

 //刚进入编辑页面时, 去掉省份,城市中与当前国家无关的选项
 function clearProvince(countryId, provinceId, cityId, areaId) {
     var country = $("#"+countryId).val(); //当前选择的国家
     var provinceDom = $("#"+provinceId);
     var cityDom = $("#"+cityId);
     var areaDom = $("#"+areaId);
     var province = provinceDom.val();
     var city = cityDom.val();

     if (country) {
         //删除省份中不属于国家的
         for (code in _provinceList) {
             let prefix1 = strPad(country, '0', countryLength);
             let prefix2 = code.substring(0, countryLength);

             if (code.length> 0 && prefix1 !== prefix2) {
                 provinceDom.find("option[value='"+code+"']").remove();
             }
         }

         //删除城市中不属于省份的
         for (code in _cityList) {
             let prefix1 = province.substring(0, countryLength+provinceLength);
             let prefix2 = code.substring(0, countryLength+provinceLength);

             if (code.length> 0 && prefix1 !== prefix2) {
                 cityDom.find("option[value='"+code+"']").remove();
             }
         }

         //删除区县中不属于城市的
         for (code in _areaList) {
             let prefix1 = city.substring(0, countryLength+provinceLength+cityLength);
             let prefix2 = code.substring(0, countryLength+provinceLength+cityLength);

             if (code.length> 0 && prefix1 !== prefix2) {
                 areaDom.find("option[value='"+code+"']").remove();
             }
         }
     }
 }

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

5. 循环生成模板 (依赖jquery, 模板中的变量示例: {var}, 参数1: jquery识别的选择符, 参数2: 对象数组)

 function repeat(selector, arr) {
     let tplDom = $(selector);
     let tpl = tplDom[].outerHTML;
     let out = '';
     for (let i in arr) {
         if (!isNaN(parseInt(i))) {
             let map = arr[i];
             let tmp = tpl;
             for (let j in map) {
                 let re = new RegExp('{' + j + '}', 'g');
                 tmp = tmp.replace(re, map[j]);
             }
             out += tmp;
         }
     }

     tplDom.replaceWith(out);
 }

6. 选中select标签中的option

id: select标签的id, values: array, option的value属性数值

 function markSelected(id, values) {
     let arr = document.getElementById(id).getElementsByTagName('option');

     for (let i=0; i<arr.length; i++) {
         let val = arr[i].getAttribute('value');
         if (values.indexOf(val) > -1) {
             arr[i].setAttribute('selected', 'selected');
         } else {
             arr[i].removeAttribute('selected');
         }
     }
 }