美文网首页
JavaScript常用工具方法封装(2)

JavaScript常用工具方法封装(2)

作者: 时尚灬IT男 | 来源:发表于2019-03-06 13:22 被阅读4次

JavaScript

4. String 字符串操作

/**

* 去除空格

* @param  {str}

* @param  {type}

*      type:  1-所有空格  2-前后空格  3-前空格 4-后空格

* @return {String}

*/

trim (str, type) {

    type = type || 1

    switch (type) {

        case 1:

            return str.replace(/\s+/g, "");

        case 2:

            return str.replace(/(^\s*)|(\s*$)/g, "");

        case 3:

            return str.replace(/(^\s*)/g, "");

        case 4:

            return str.replace(/(\s*$)/g, "");

        default:

            return str;

    }

}

/**

* @param  {str}

* @param  {type}

*      type:  1:首字母大写  2:首页母小写  3:大小写转换  4:全部大写  5:全部小写

* @return {String}

*/

changeCase (str, type) {

    type = type || 4

    switch (type) {

        case 1:

            return str.replace(/\b\w+\b/g, function (word) {

                return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();

            });

        case 2:

            return str.replace(/\b\w+\b/g, function (word) {

                return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();

            });

        case 3:

            return str.split('').map( function(word){

                if (/[a-z]/.test(word)) {

                    return word.toUpperCase();

                }else{

                    return word.toLowerCase()

                }

            }).join('')

        case 4:

            return str.toUpperCase();

        case 5:

            return str.toLowerCase();

        default:

            return str;

    }

}

/*

    检测密码强度

*/

checkPwd (str) {

    var Lv = 0;

    if (str.length < 6) {

        return Lv

    }

    if (/[0-9]/.test(str)) {

        Lv++

    }

    if (/[a-z]/.test(str)) {

        Lv++

    }

    if (/[A-Z]/.test(str)) {

        Lv++

    }

    if (/[\.|-|_]/.test(str)) {

        Lv++

    }

    return Lv;

}

/*过滤html代码(把<>转换)*/

filterTag (str) {

    str = str.replace(/&/ig, "&amp;");

    str = str.replace(/</ig, "&lt;");

    str = str.replace(/>/ig, "&gt;");

    str = str.replace(" ", " ");

    return str;

}

5. Number

/*随机数范围*/

random (min, max) {

    if (arguments.length === 2) {

        return Math.floor(min + Math.random() * ( (max+1) - min ))

    }else{

        return null;

    }

}

/*将阿拉伯数字翻译成中文的大写数字*/

numberToChinese (num) {

    var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");

    var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");

    var a = ("" + num).replace(/(^0*)/g, "").split("."),

        k = 0,

        re = "";

    for(var i = a[0].length - 1; i >= 0; i--) {

        switch(k) {

            case 0:

                re = BB[7] + re;

                break;

            case 4:

                if(!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")

                    .test(a[0]))

                    re = BB[4] + re;

                break;

            case 8:

                re = BB[5] + re;

                BB[7] = BB[5];

                k = 0;

                break;

        }

        if(k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)

            re = AA[0] + re;

        if(a[0].charAt(i) != 0)

            re = AA[a[0].charAt(i)] + BB[k % 4] + re;

        k++;

    }

    if(a.length > 1) // 加上小数部分(如果有小数部分)

    {

        re += BB[6];

        for(var i = 0; i < a[1].length; i++)

            re += AA[a[1].charAt(i)];

    }

    if(re == '一十')

        re = "十";

    if(re.match(/^一/) && re.length == 3)

        re = re.replace("一", "");

    return re;

}

/*将数字转换为大写金额*/

changeToChinese (Num) {

        //判断如果传递进来的不是字符的话转换为字符

        if(typeof Num == "number") {

            Num = new String(Num);

        };

        Num = Num.replace(/,/g, "") //替换tomoney()中的“,”

        Num = Num.replace(/ /g, "") //替换tomoney()中的空格

        Num = Num.replace(/¥/g, "") //替换掉可能出现的¥字符

        if(isNaN(Num)) { //验证输入的字符是否为数字

            //alert("请检查小写金额是否正确");

            return "";

        };

        //字符处理完毕后开始转换,采用前后两部分分别转换

        var part = String(Num).split(".");

        var newchar = "";

        //小数点前进行转化

        for(var i = part[0].length - 1; i >= 0; i--) {

            if(part[0].length > 10) {

                return "";

                //若数量超过拾亿单位,提示

            }

            var tmpnewchar = ""

            var perchar = part[0].charAt(i);

            switch(perchar) {

                case "0":

                    tmpnewchar = "零" + tmpnewchar;

                    break;

                case "1":

                    tmpnewchar = "壹" + tmpnewchar;

                    break;

                case "2":

                    tmpnewchar = "贰" + tmpnewchar;

                    break;

                case "3":

                    tmpnewchar = "叁" + tmpnewchar;

                    break;

                case "4":

                    tmpnewchar = "肆" + tmpnewchar;

                    break;

                case "5":

                    tmpnewchar = "伍" + tmpnewchar;

                    break;

                case "6":

                    tmpnewchar = "陆" + tmpnewchar;

                    break;

                case "7":

                    tmpnewchar = "柒" + tmpnewchar;

                    break;

                case "8":

                    tmpnewchar = "捌" + tmpnewchar;

                    break;

                case "9":

                    tmpnewchar = "玖" + tmpnewchar;

                    break;

            }

            switch(part[0].length - i - 1) {

                case 0:

                    tmpnewchar = tmpnewchar + "元";

                    break;

                case 1:

                    if(perchar != 0) tmpnewchar = tmpnewchar + "拾";

                    break;

                case 2:

                    if(perchar != 0) tmpnewchar = tmpnewchar + "佰";

                    break;

                case 3:

                    if(perchar != 0) tmpnewchar = tmpnewchar + "仟";

                    break;

                case 4:

                    tmpnewchar = tmpnewchar + "万";

                    break;

                case 5:

                    if(perchar != 0) tmpnewchar = tmpnewchar + "拾";

                    break;

                case 6:

                    if(perchar != 0) tmpnewchar = tmpnewchar + "佰";

                    break;

                case 7:

                    if(perchar != 0) tmpnewchar = tmpnewchar + "仟";

                    break;

                case 8:

                    tmpnewchar = tmpnewchar + "亿";

                    break;

                case 9:

                    tmpnewchar = tmpnewchar + "拾";

                    break;

            }

            var newchar = tmpnewchar + newchar;

        }

        //小数点之后进行转化

        if(Num.indexOf(".") != -1) {

            if(part[1].length > 2) {

                // alert("小数点之后只能保留两位,系统将自动截断");

                part[1] = part[1].substr(0, 2)

            }

            for(i = 0; i < part[1].length; i++) {

                tmpnewchar = ""

                perchar = part[1].charAt(i)

                switch(perchar) {

                    case "0":

                        tmpnewchar = "零" + tmpnewchar;

                        break;

                    case "1":

                        tmpnewchar = "壹" + tmpnewchar;

                        break;

                    case "2":

                        tmpnewchar = "贰" + tmpnewchar;

                        break;

                    case "3":

                        tmpnewchar = "叁" + tmpnewchar;

                        break;

                    case "4":

                        tmpnewchar = "肆" + tmpnewchar;

                        break;

                    case "5":

                        tmpnewchar = "伍" + tmpnewchar;

                        break;

                    case "6":

                        tmpnewchar = "陆" + tmpnewchar;

                        break;

                    case "7":

                        tmpnewchar = "柒" + tmpnewchar;

                        break;

                    case "8":

                        tmpnewchar = "捌" + tmpnewchar;

                        break;

                    case "9":

                        tmpnewchar = "玖" + tmpnewchar;

                        break;

                }

                if(i == 0) tmpnewchar = tmpnewchar + "角";

                if(i == 1) tmpnewchar = tmpnewchar + "分";

                newchar = newchar + tmpnewchar;

            }

        }

        //替换所有无用汉字

        while(newchar.search("零零") != -1)

            newchar = newchar.replace("零零", "零");

        newchar = newchar.replace("零亿", "亿");

        newchar = newchar.replace("亿万", "亿");

        newchar = newchar.replace("零万", "万");

        newchar = newchar.replace("零元", "元");

        newchar = newchar.replace("零角", "");

        newchar = newchar.replace("零分", "");

        if(newchar.charAt(newchar.length - 1) == "元") {

            newchar = newchar + "整"

        }

        return newchar;

    }

6. Http

/**

* @param  {setting}

*/

ajax(setting){

    //设置参数的初始值

    var opts={

        method: (setting.method || "GET").toUpperCase(), //请求方式

        url: setting.url || "", // 请求地址

        async: setting.async || true, // 是否异步

        dataType: setting.dataType || "json", // 解析方式

        data: setting.data || "", // 参数

        success: setting.success || function(){}, // 请求成功回调

        error: setting.error || function(){} // 请求失败回调

    }

    // 参数格式化

    function params_format (obj) {

        var str = ''

        for (var i in obj) {

            str += i + '=' + obj[i] + '&'

        }

        return str.split('').slice(0, -1).join('')

    }

    // 创建ajax对象

    var xhr=new XMLHttpRequest();

    // 连接服务器open(方法GET/POST,请求地址, 异步传输)

    if(opts.method == 'GET'){

        xhr.open(opts.method, opts.url + "?" + params_format(opts.data), opts.async);

        xhr.send();

    }else{

        xhr.open(opts.method, opts.url, opts.async);

        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        xhr.send(opts.data);

    }

    /*

    ** 每当readyState改变时,就会触发onreadystatechange事件

    ** readyState属性存储有XMLHttpRequest的状态信息

    ** 0 :请求未初始化

    ** 1 :服务器连接已建立

    ** 2 :请求已接受

    ** 3 : 请求处理中

    ** 4 :请求已完成,且相应就绪

    */

    xhr.onreadystatechange = function() {

        if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {

            switch(opts.dataType){

                case "json":

                    var json = JSON.parse(xhr.responseText);

                    opts.success(json);

                    break;

                case "xml":

                    opts.success(xhr.responseXML);

                    break;

                default:

                    opts.success(xhr.responseText);

                    break;

            }

        }

    }

    xhr.onerror = function(err) {

        opts.error(err);

    }

}

/**

* @param  {url}

* @param  {setting}

* @return {Promise}

*/

fetch(url, setting) {

    //设置参数的初始值

    let opts={

        method: (setting.method || 'GET').toUpperCase(), //请求方式

        headers : setting.headers  || {}, // 请求头设置

        credentials : setting.credentials  || true, // 设置cookie是否一起发送

        body: setting.body || {},

        mode : setting.mode  || 'no-cors', // 可以设置 cors, no-cors, same-origin

        redirect : setting.redirect  || 'follow', // follow, error, manual

        cache : setting.cache  || 'default' // 设置 cache 模式 (default, reload, no-cache)

    }

    let dataType = setting.dataType || "json", // 解析方式 

        data = setting.data || "" // 参数

    // 参数格式化

    function params_format (obj) {

        var str = ''

        for (var i in obj) {

            str += `${i}=${obj[i]}&`

        }

        return str.split('').slice(0, -1).join('')

    }

    if (opts.method === 'GET') {

        url = url + (data?`?${params_format(data)}`:'')

    }else{

        setting.body = data || {}

    }

    return new Promise( (resolve, reject) => {

        fetch(url, opts).then( async res => {

            let data = dataType === 'text' ? await res.text() :

                dataType === 'blob' ? await res.blob() : await res.json()

            resolve(data)

        }).catch( e => {

            reject(e)

        })

    })

}

7. DOM

$ (selector){

    var type = selector.substring(0, 1);

    if (type === '#') {

        if (document.querySelecotor) return document.querySelector(selector)

            return document.getElementById(selector.substring(1))

    }else if (type === '.') {

        if (document.querySelecotorAll) return document.querySelectorAll(selector)

            return document.getElementsByClassName(selector.substring(1))

    }else{

        return document['querySelectorAll' ? 'querySelectorAll':'getElementsByTagName'](selector)

    }

}

/*检测类名*/

hasClass (ele, name) {

    return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));

}

/*添加类名*/

addClass (ele, name) {

    if (!this.hasClass(ele, name)) ele.className += " " + name;

}

/*删除类名*/

removeClass (ele, name) {

    if (this.hasClass(ele, name)) {

        var reg = new RegExp('(\\s|^)' + name + '(\\s|$)');

        ele.className = ele.className.replace(reg, '');

    }

}

/*替换类名*/

replaceClass (ele, newName, oldName) {

    this.removeClass(ele, oldName);

    this.addClass(ele, newName);

}

/*获取兄弟节点*/

siblings (ele) {

    console.log(ele.parentNode)

    var chid = ele.parentNode.children,eleMatch = [];

    for(var i = 0, len = chid.length; i < len; i ++){

        if(chid[i] != ele){

            eleMatch.push(chid[i]);

        }

    }

    return eleMatch;

}

/*获取行间样式属性*/

getByStyle (obj,name){

    if(obj.currentStyle){

        return  obj.currentStyle[name];

    }else{

        return  getComputedStyle(obj,false)[name];

    }

}

8. Storage 储存操作

class StorageFn {

    constructor () {

        this.ls = window.localStorage;

        this.ss = window.sessionStorage;

    }

    /*-----------------cookie---------------------*/

    /*设置cookie*/

    setCookie (name, value, day) {

        var setting = arguments[0];

        if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){

            for (var i in setting) {

                var oDate = new Date();

                oDate.setDate(oDate.getDate() + day);

                document.cookie = i + '=' + setting[i] + ';expires=' + oDate;

            }

        }else{

            var oDate = new Date();

            oDate.setDate(oDate.getDate() + day);

            document.cookie = name + '=' + value + ';expires=' + oDate;

        }

    }

    /*获取cookie*/

    getCookie (name) {

        var arr = document.cookie.split('; ');

        for (var i = 0; i < arr.length; i++) {

            var arr2 = arr[i].split('=');

            if (arr2[0] == name) {

                return arr2[1];

            }

        }

        return '';

    }

    /*删除cookie*/

    removeCookie (name) {

        this.setCookie(name, 1, -1);

    }

    /*-----------------localStorage---------------------*/

    /*设置localStorage*/

    setLocal(key, val) {

        var setting = arguments[0];

        if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){

            for(var i in setting){

                this.ls.setItem(i, JSON.stringify(setting[i]))

            }

        }else{

            this.ls.setItem(key, JSON.stringify(val))

        }

    }

    /*获取localStorage*/

    getLocal(key) {

        if (key) return JSON.parse(this.ls.getItem(key))

        return null;

    }

    /*移除localStorage*/

    removeLocal(key) {

        this.ls.removeItem(key)

    }

    /*移除所有localStorage*/

    clearLocal() {

        this.ls.clear()

    }

    /*-----------------sessionStorage---------------------*/

    /*设置sessionStorage*/

    setSession(key, val) {

        var setting = arguments[0];

        if (Object.prototype.toString.call(setting).slice(8, -1) === 'Object'){

            for(var i in setting){

                this.ss.setItem(i, JSON.stringify(setting[i]))

            }

        }else{

            this.ss.setItem(key, JSON.stringify(val))

        }

    }

    /*获取sessionStorage*/

    getSession(key) {

        if (key) return JSON.parse(this.ss.getItem(key))

        return null;

    }

    /*移除sessionStorage*/

    removeSession(key) {

        this.ss.removeItem(key)

    }

    /*移除所有sessionStorage*/

    clearSession() {

        this.ss.clear()

    }

}

9. Other 其它操作

/*获取网址参数*/

getURL(name){

    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

    var r = decodeURI(window.location.search).substr(1).match(reg);

    if(r!=null) return  r[2]; return null;

}

/*获取全部url参数,并转换成json对象*/

getUrlAllParams (url) {

    var url = url ? url : window.location.href;

    var _pa = url.substring(url.indexOf('?') + 1),

        _arrS = _pa.split('&'),

        _rs = {};

    for (var i = 0, _len = _arrS.length; i < _len; i++) {

        var pos = _arrS[i].indexOf('=');

        if (pos == -1) {

            continue;

        }

        var name = _arrS[i].substring(0, pos),

            value = window.decodeURIComponent(_arrS[i].substring(pos + 1));

        _rs[name] = value;

    }

    return _rs;

}

/*删除url指定参数,返回url*/

delParamsUrl(url, name){

    var baseUrl = url.split('?')[0] + '?';

    var query = url.split('?')[1];

    if (query.indexOf(name)>-1) {

        var obj = {}

        var arr = query.split("&");

        for (var i = 0; i < arr.length; i++) {

            arr[i] = arr[i].split("=");

            obj[arr[i][0]] = arr[i][1];

        };

        delete obj[name];

        var url = baseUrl + JSON.stringify(obj).replace(/[\"\{\}]/g,"").replace(/\:/g,"=").replace(/\,/g,"&");

        return url

    }else{

        return url;

    }

}

/*获取十六进制随机颜色*/

getRandomColor () {

    return '#' + (function(h) {

        return new Array(7 - h.length).join("0") + h;

    })((Math.random() * 0x1000000 << 0).toString(16));

}

/*图片加载*/

imgLoadAll(arr,callback){

    var arrImg = [];

    for (var i = 0; i < arr.length; i++) {

        var img = new Image();

        img.src = arr[i];

        img.onload = function(){

            arrImg.push(this);

            if (arrImg.length == arr.length) {

                callback && callback();

            }

        }

    }

}

/*音频加载*/

loadAudio(src, callback) {

    var audio = new Audio(src);

    audio.onloadedmetadata = callback;

    audio.src = src;

}

/*DOM转字符串*/

domToStirng(htmlDOM){

    var div= document.createElement("div");

    div.appendChild(htmlDOM);

    return div.innerHTML

}

/*字符串转DOM*/

stringToDom(htmlString){

    var div= document.createElement("div");

    div.innerHTML=htmlString;

    return div.children[0];

}

/**

* 光标所在位置插入字符,并设置光标位置

*

* @param {dom} 输入框

* @param {val} 插入的值

* @param {posLen} 光标位置处在 插入的值的哪个位置

*/

setCursorPosition (dom,val,posLen) {

    var cursorPosition = 0;

    if(dom.selectionStart){

        cursorPosition = dom.selectionStart;

    }

    this.insertAtCursor(dom,val);

    dom.focus();

    console.log(posLen)

    dom.setSelectionRange(dom.value.length,cursorPosition + (posLen || val.length));

}

/*光标所在位置插入字符*/

insertAtCursor(dom, val) {

    if (document.selection){

        dom.focus();

        sel = document.selection.createRange();

        sel.text = val;

        sel.select();

    }else if (dom.selectionStart || dom.selectionStart == '0'){

        let startPos = dom.selectionStart;

        let endPos = dom.selectionEnd;

        let restoreTop = dom.scrollTop;

        dom.value = dom.value.substring(0, startPos) + val + dom.value.substring(endPos, dom.value.length);

        if (restoreTop > 0){

            dom.scrollTop = restoreTop;

        }

        dom.focus();

        dom.selectionStart = startPos + val.length;

        dom.selectionEnd = startPos + val.length;

    } else {

        dom.value += val;

        dom.focus();

    }

}

相关文章

网友评论

      本文标题:JavaScript常用工具方法封装(2)

      本文链接:https://www.haomeiwen.com/subject/qxutpqtx.html