utils.js

 

完整的代码, 可以复制引用

个人在项目里的常用工具

新建utils.js文件

let Utils = {
        // 缓存处理工具
        // let users = this.Utils.storage.get('users');
        // if (users) {}
        storage: {
        /**
         * 存储数据到localStorage。
         *
         * @param {string} key - 存储的键名。
         * @param {*} value - 要存储的数据。可以是字符串、数字、对象或数组。
         * @param {number} [expiration=0] - 数据的过期时间（天数）。默认为0，表示不过期。
         *  storage.set('users', '111');
         *  storage.set('users', '111', 7);
         */
        set(key, value, expiration = 0) {
            let obj = {
                data: value,
                setTime: new Date().getTime()
            };
            if (expiration) {
                obj.expiration = 86400 * expiration;
            }
            try {
                localStorage.setItem(key, JSON.stringify(obj));
            } catch (e) {
                console.error('set error:', e);
            }
        },

        /**
         * 从localStorage获取数据。
         *
         * @param {string} key - 需要获取的键名。
         * @returns {*|false} 返回存储的数据。如果数据不存在或已过期，则返回false。
         *  let users = storage.get('users');
         *  if (users) {}
         */
        get(key) {
            try {
                let item = JSON.parse(localStorage.getItem(key));
                if (!item) return false;

                let nowTime = new Date().getTime();

                if (item.expiration && nowTime - item.setTime > item.expiration * 1000) {
                    localStorage.removeItem(key);
                    return false;
                }
                return item.data;
            } catch (e) {
                console.error('get error:', e);
                return false;
            }
        },

        /**
         * 从localStorage中删除指定的数据。
         * @param {string} key - 需要删除的键名。
         * storage.remove('users');
         */
        remove(key) {
            localStorage.removeItem(key);
        }
       },


        // @input="bank.card_number = Utils.number(bank.card_number)" v-model="bank.card_number"
        /**
         * @description 数字过滤器，字符串中只包含数字和可选的小数点。
         * @function number
         * @param {string} str - 要过滤的字符串
         * @param {boolean} float - 是否允许小数点，默认为false
         * @param {boolean} firstZero - 是否允许首位为0，默认为false
         * @returns {string} 只包含数字（和可选的小数点）的字符串
         */
        number (str, float = false, firstZero = false) {
            str = String(str); // 确保str是字符串类型

            // float为true时，可以输入小数点
            if (float) {
                // firstZero为true时，首位可以为0
                if(firstZero) {
                    // 替换除数字和小数点外的任何字符；替换连续出现的多个小数点为一个小数点
                    return str.replace(/[^0-9.]/g, '').replace(/\.{2,}/g, '.');
                } else {
                    // 删除非数字和小数点字符；删除字符串开头的所有0；替换连续出现的多个小数点为一个小数点
                    return str.replace(/[^\d.]/g, '').replace(/^0{1,}/g,'').replace(/\.{2,}/g, '.');
                }
            } else {
                // 不允许输入小数点
                // firstZero为true时，首位可以为0
                if(firstZero) {
                    // 删除非数字字符
                    return str.replace(/[^0-9]/g, '');
                } else {
                    // 删除非数字字符；删除字符串开头的所有0
                    return str.replace(/[^0-9]/g, '').replace(/^0+/g, '');
                }
            }
        },

        //  @input="users.username = Utils.prohibitChineseAndSpace(users.username)"
        /**
         * @description 禁止输入汉字和空格
         * @function prohibitChineseAndSpace
         * @param {string} str - 输入的字符串
         * @returns {string} 不含汉字和空格的字符串
         */
        prohibitChineseAndSpace(str) {
            return str.replace(/[\u4e00-\u9fa5\s]/g, '');
        },


        // this.Utils.trimString(item)
        /**
         * @description 去除字符串前后的空格
         * @function trimString
         * @param {string} str - 输入的字符串
         * @returns {string} 去除前后空格后的字符串
         */
        trimString(str) {
            return str.replace(/^\s+|\s+$/g, '');
        },

        /**
         * @description 去除字符串中的换行
         * @function removeLineBreak
         * @param {string} str - 输入的字符串
         * @returns {string} 去除换行后的字符串
         */
        removeLineBreak(str) {
            return str.replace(/\n/g, '');
        },

        /**
         * @description 去除字符串中的回车
         * @function removeCarriageReturn
         * @param {string} str - 输入的字符串
         * @returns {string} 去除回车后的字符串
         */
        removeCarriageReturn(str) {
            return str.replace(/\r/g, '');
        },

        // if (this.Utils.checkIsChinese(number)) {}
        /**
         * @description 检查字符串是否包含汉字
         * @function containsChinese
         * @param {string} str - 输入的字符串
         * @returns {boolean} 如果字符串包含汉字则返回true，否则返回false
         */
        containsChinese(str) {
            return /[\u4e00-\u9fa5]/.test(str);
        },

        // Utils.toFixed(String(user.balance))
        /**
         * @description 格式化数字字符串，使其具有指定数量的小数位。
         * @function toFixed
         * @param {string} str - 要格式化的数字字符串
         * @param {number} num - 需要的小数位数，默认为2
         * @returns {string} 格式化后的字符串
         */
        toFixed (str, num = 2) {
            // 将输入转换为字符串
            str = String(str);

            // 检查字符串中是否包含小数点
            if (str.indexOf('.') > -1) {
                // 如果有小数点，就计算需要添加多少个0
                let zeo = '';
                // 循环，根据需要的小数位数和当前小数位数，计算要添加的0的数量
                for (let i = 0; i < (num - str.substr(str.lastIndexOf('.') + 1).length); i++) {
                    zeo += '0';
                }
                // 返回原始数字字符串加上需要的0，以达到指定的小数位数
                return str.substr(0, str.lastIndexOf('.') + num + 1) + zeo;
            } else {
                // 如果没有小数点，添加一个小数点和相应数量的0
                let zeo = '';
                for (let i = 0; i < num; i++) {
                    zeo += '0';
                }
                return str + '.' + zeo;
            }
        },

        // this.Utils.secondsToCountdown(this.time)
        /**
         * @description 将给定的秒数转换为倒计时格式
         * @function secondsToCountdown
         * @param {number} totalSeconds - 总秒数，如1000
         * @returns {string} 返回格式为 "小时:分钟:秒" 的倒计时
         */
        secondsToCountdown(totalSeconds) {
            // 计算小时数
            const hours = Math.floor(totalSeconds / 3600);
            // 剩余的秒数计算分钟数
            const minutes = Math.floor((totalSeconds - (hours * 3600)) / 60);
            // 计算剩余的秒数
            const seconds = totalSeconds - (hours * 3600) - (minutes * 60);

            // 返回格式化的时间
            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        },


    // obj 传入时间  返回 yyyy-mm-dd
        // Utils.formatTime(item.time_bought)
        /**
         * 时间格式化函数。
         *
         * @description
         * 这个函数可以根据所提供的格式字符串将日期格式化为所需的字符串格式。
         * 支持的格式化字符串包括：YYYY、MM、DD、HH、MM 和 SS。
         *
         * @function formatDate
         *
         * @param {Date|string|number} date - 输入的日期，可以是日期对象、日期字符串或时间戳。
         * @param {string} format - 期望的格式化字符串，如 "YYYY-MM-DD HH:MM:SS"。
         *
         * @returns {string} - 返回按照指定格式格式化后的日期字符串。
         */
        formatDate(date, format) {
            // 如果输入是字符串或数字（例如时间戳），则将其转换为日期对象。
            if (typeof date === 'string' || typeof date === 'number') {
                date = new Date(date);
            }

            // 创建一个映射对象，用于存储日期的各个部分。
            // 使用padStart方法确保月、日、小时、分钟和秒始终为两位数。
            const map = {
                "YYYY": date.getFullYear(),
                "MM": (date.getMonth() + 1).toString().padStart(2, '0'),
                "DD": date.getDate().toString().padStart(2, '0'),
                "HH": date.getHours().toString().padStart(2, '0'),
                "MI": date.getMinutes().toString().padStart(2, '0'),
                "SS": date.getSeconds().toString().padStart(2, '0')
            };

            // 使用正则表达式替换格式字符串中的占位符。
            return format.replace(/YYYY|MM|DD|HH|MI|SS/g, (match) => {
                return map[match];
            });
            // 示例使用：
            // console.log(formatDate(new Date(), 'YYYY-MM-DD')); // 输出格式：2023-09-04
            // console.log(formatDate(new Date(), 'YYYY/MM/DD')); // 输出格式：2023/09/04
            // console.log(formatDate(new Date(), 'HH:MI:SS')); // 输出格式：15:25:30
            // console.log(formatDate(new Date(), 'YYYY-MM-DD HH:MI:SS')); // 输出格式：2023-09-04 15:25:30
            // console.log(formatDate(new Date(), 'YYYY/MM/DD HH:MI:SS')); // 输出格式：2023/09/04 15:25:30
        },


        // this.Utils.filterData(this.searchs)
        /**
         * 过滤数据函数
         *
         * @description
         * 此函数的主要目的是遍历一个对象的所有属性，如果属性的值为空字符串或仅包含空格，
         * 则从该对象中删除此属性。
         *
         * @function filterData
         *
         * @param {Object} data - 需要过滤的数据对象。
         *
         * @returns {void} - 该函数不返回任何内容，但会直接修改传入的对象。
         */
        filterData(data) {
            // 使用Object.keys(data)来获取对象的所有键，然后遍历每一个键。
            for (const k of Object.keys(data)) {
                // 如果当前键的值为空字符串或仅包含空格，则从对象中删除这个键。
                if (data[k] === '' || data[k] === ' ') {
                    delete data[k];
                }
            }

            // 示例使用
            // let sampleData = {
            //     name: "John",
            //     age: " ",
            //     city: "New York",
            //     profession: ""
            // };
            //
            // filterData(sampleData);
            // console.log(sampleData); // 输出: { name: 'John', city: 'New York' }
        },
        
        
        // this.Utils.setImg(k['content'], 'add');
        /**
         * 处理文本中的img标签的src属性
         *
         * @description
         * 此函数用于处理字符串中所有的`<img>`标签的`src`属性。根据传入的类型，
         * 它可以添加或删除给定的请求头。
         *
         * @function setImg
         *
         * @param {string} str - 需要处理的包含img标签的字符串。
         * @param {string} type - 操作类型，可以为"add"或"remove"。
         *                       "add"将添加请求头，而"remove"将删除请求头。
         *
         * @returns {string} - 返回处理后的字符串。
         */
        setImg(str, type) {
            // 使用正则表达式匹配所有的<img>标签
            let imgReg = /<img.*?(?:>|\/>)/gi;
            
            // 使用正则表达式匹配<img>标签中的src属性的值
            let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;

            // 获取字符串中所有匹配的<img>标签
            let arr = str.match(imgReg);

            // 初始的待处理字符串
            let st = str;

            // 如果存在<img>标签
            if (arr) {
                // 遍历所有的<img>标签
                for (let i = 0; i < arr.length; i++) {
                    // 获取当前<img>标签中的src属性的值
                    let src = arr[i].match(srcReg);

                    // 如果操作类型是"remove"
                    if (type === 'remove') {
                        // 从src属性的值中删除请求头
                        let replace_src = src[1].replace(process.env.imgURL, '');
                        // 在原始字符串中替换已处理的src属性值
                        st = st.replace(src[1], replace_src);
                    }
                    // 如果操作类型是"add"
                    else if (type === 'add') {
                        // 在src属性的值前添加请求头
                        st = st.replace(src[1], process.env.imgURL + src[1]);
                    }
                }
            }

            // 返回处理后的字符串
            return st;
            
            // 示例使用：
            // 假设process.env.imgURL = "http://mycdn.com/"
            // let sampleText = "<p>Some text <img src='/path/to/image1.jpg'/> and <img src='/path/to/image2.jpg'/></p>";
            // let result = setImg(sampleText, 'add');
            // 输出：<p>Some text <img src='http://mycdn.com/path/to/image1.jpg'/> and <img src='http://mycdn.com/path/to/image2.jpg'/></p>
        }
    };
    export default Utils