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[0].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');
        }
    }
}