美文网首页
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