项目中常用的工具函数（三）-CSDN博客

本文链接：https://blog.csdn.net/Kylincsg/article/details/135743303

本文介绍了项目开发中常用的11个JavaScript工具函数，包括文本复制、HTML解码、URL识别、防止图片粘贴、时间差计算、日期格式化、各种数据格式验证以及文件下载和价格格式化。这些函数在评论系统、用户输入验证等方面有广泛应用。

摘要由CSDN通过智能技术生成

上一篇：项目中常用的工具函数（二）

1、文本复制

/**
 * 评论复制功能
 * @param comment 评论对象
 */
export const clickCopyPower(comment) => {
    // 正则去标签化
    let copyContent = comment.content.replace(/(<([^>]+)>)/gi, "")
    // 添加一个input元素放置需要的文本内容
	const dataContainer = document.createElement('input');
	dataContainer.value = this.htmlDecode(copyContent);
	document.body.appendChild(dataContainer);
	// 选中并复制文本到剪切板
	dataContainer.select();
	document.execCommand('copy');
	// 移除input元素
	document.body.removeChild(dataContainer);
	this.$message.success('复制成功')
},

2、反转义html

/**
 * 反转义html
 */
 export const htmlDecode(text) => {
    //1.首先动态创建一个容器标签元素，如DIV
    var temp = document.createElement("div");
	//2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
    temp.innerHTML = text;
    //3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
    var output = temp.innerText || temp.textContent;
    temp = null;
    return output;
},

3、识别网址

/**
 * @函数描述: 识别网址并添加a标签
 * @param: {string} text
 **/
 export const replaceUrlsWithLinks(text) => {
	// 匹配网址的正则表达式
	var urlRegexContainHttp = /(https?:\/\/[^\s]+)/g
	var urlRegexContainWww = /(www\.[^\s]+)/g;
	var replacedText
	// 使用replace()方法将匹配到的网址替换为带有<a>标签的链接
	if(urlRegexContainHttp.test(text)){
		replacedText = text.replace(urlRegexContainHttp, function(url) {
			return '<a href="' + url + '" class="mention-link" target="_blank">' + url + '</a>';
		});
	}else {
		replacedText = text.replace(urlRegexContainWww, function(url) {
			return '<a href="http://' + url + '" class="mention-link" target="_blank">' + url + '</a>';
		});
	}

	return replacedText;
}

4、禁止图片粘贴

//  禁止图片粘贴
document.addEventListener('paste', function(event) {
	var items = event.clipboardData.items;
	for (var i = 0; i < items.length; i++) {
		if (items[i].type.indexOf('image') !== -1) {
			event.preventDefault();
			break;
		}
	}
});

5、计算时间差

/**
 * 计算当前时间与创建时间的时间差
 * @param date 生成评论数据的时间
 * @param timer 时间差
 */
 export const timeDifference(date,timer) => {
	let dateTime = new Date(date).getTime();
	let currentDate = new Date().getTime()  // 毫秒
	let time = timer * 60 * 1000
	if(currentDate - dateTime > time){
		return false
	}else {
		return true
	}
}

应用：主要用于评论显示时间、评论撤回功能显示等

6、日期转化

/**
 * 日期格式化
 */
export function dateFormat(date = new Date(),format = "YYYY-MM-DD HH:MM:SS") {
      if (date != 'Invalid Date') {
        var o = {
          "M+": date.getMonth() + 1, //month
          "d+": date.getDate(), //day
          "h+": date.getHours(), //hour
          "m+": date.getMinutes(), //minute
          "s+": date.getSeconds(), //second
          "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
          "S": date.getMilliseconds() //millisecond
        }
        if (/(y+)/.test(format)){
          format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o)
          if (new RegExp("(" + k + ")").test(format)){
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
          }
        return format;
      }
      return '';
    },

7、判断常见格式

/**
 * 网址
 * @param {string} textval
*/
export function validateURL(textval) {
    const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
    return urlregex.test(textval)
}

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail(s) {
    return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

export function validateEmail(email) {
    const re = /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return re.test(email)
}

/**
 * 手机号码
 * @param {*} s
 */
export function isMobile(s) {
    return /^1[0-9]{10}$/.test(s)
}

/**
 * 电话号码
 * @param {*} s
 */
export function isPhone(s) {
    return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
}

/**
 * URL地址
 * @param {*} s
 */
export function isURL(s) {
    return /^http[s]?:\/\/.*/.test(s)
}

/* 小写字母*/
export function validateLowerCase(str) {
    const reg = /^[a-z]+$/
    return reg.test(str)
}

/* 大写字母*/
export function validateUpperCase(str) {
    const reg = /^[A-Z]+$/
    return reg.test(str)
}

/* 大小写字母*/
export function validatAlphabets(str) {
    const reg = /^[A-Za-z]+$/
    return reg.test(str)
}

/*验证pad还是pc*/
export const vaildatePc = function() {
     const userAgentInfo = navigator.userAgent;
     const Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
     let flag = true;
     for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
     }
   return flag;
 }

/**
 * 判断是否为整数
 */
export function validatenum(num, type) {
    let regName = /[^\d.]/g;
    if (type == 1) {
        if (!regName.test(num)) return false;
    } else if (type == 2) {
        regName = /[^\d]/g;
        if (!regName.test(num)) return false;
    }
    return true;
}

/**
 * 判断是否为小数
 */
export function validatenumord(num, type) {
    let regName = /[^\d.]/g;
    if (type == 1) {
        if (!regName.test(num)) return false;
    } else if (type == 2) {
        regName = /[^\d.]/g;
        if (!regName.test(num)) return false;
    }
    return true;
}

/**
 * 判断是否为空
 */
export function validatenull(val) {
    if (typeof val == 'boolean') {
        return false;
    }
    if (typeof val == 'number') {
        return false;
    }
    if (val instanceof Array) {
        if (val.length == 0) return true;
    } else if (val instanceof Object) {
        if (JSON.stringify(val) === '{}') return true;
    } else {
        if (val == 'null' || val == null || val == 'undefined' || val == undefined || val == '') return true;
        return false;
    }
    return false;
}

8、验证身份证格式

/**
 * 判断身份证号码
 */
export function cardid(code) {
    let list = [];
    let result = true;
    let msg = '';
    var city = {
        11: "北京",
        12: "天津",
        13: "河北",
        14: "山西",
        15: "内蒙古",
        21: "辽宁",
        22: "吉林",
        23: "黑龙江 ",
        31: "上海",
        32: "江苏",
        33: "浙江",
        34: "安徽",
        35: "福建",
        36: "江西",
        37: "山东",
        41: "河南",
        42: "湖北 ",
        43: "湖南",
        44: "广东",
        45: "广西",
        46: "海南",
        50: "重庆",
        51: "四川",
        52: "贵州",
        53: "云南",
        54: "西藏 ",
        61: "陕西",
        62: "甘肃",
        63: "青海",
        64: "宁夏",
        65: "新疆",
        71: "台湾",
        81: "香港",
        82: "澳门",
        91: "国外 "
    };
    if (!validatenull(code)) {
        if (code.length == 18) {
            if (!code || !/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(code)) {
                msg = "证件号码格式错误";
            } else if (!city[code.substr(0, 2)]) {
                msg = "地址编码错误";
            } else {
                //18位身份证需要验证最后一位校验位
                code = code.split('');
                //∑(ai×Wi)(mod 11)
                //加权因子
                var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
                //校验位
                var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2, 'x'];
                var sum = 0;
                var ai = 0;
                var wi = 0;
                for (var i = 0; i < 17; i++) {
                    ai = code[i];
                    wi = factor[i];
                    sum += ai * wi;
                }
                if (parity[sum % 11] != code[17]) {
                    msg = "证件号码校验位错误";
                } else {
                    result = false;
                }

            }
        } else {
            msg = "证件号码长度不为18位";
        }

    } else {
        msg = "证件号码不能为空";
    }
    list.push(result);
    list.push(msg);
    return list;
}

9、验证手机号码格式

/**
 * 判断手机号码是否正确
 */
export function isvalidatemobile(phone) {
    let list = [];
    let result = true;
    let msg = '';
    var isPhone = /^0\d{2,3}-?\d{7,8}$/;
    //增加134 减少|1349[0-9]{7}，增加181,增加145，增加17[678]  
    if (!validatenull(phone)) {
        if (phone.length == 11) {
            if (isPhone.test(phone)) {
                msg = '手机号码格式不正确';
            } else {
                result = false;
            }
        } else {
            msg = '手机号码长度不为11位';
        }
    } else {
        msg = '手机号码不能为空';
    }
    list.push(result);
    list.push(msg);
    return list;
}

10、下载

import {saveAs} from 'file-saver';

/**
 * 下载文件（以图片为例）
 * @param url  // 文件地址  "https://XXXX.com.XXX.png"
 * @param fileName  // 文件名 "图片1"
 * @param type  // 文件类型  png
 */
export const downHandle(url,fileName,type) => {
    fetch(url).then(response => response.blob()).then(blob => {
    saveAs(blob,`${fileName}.${type});
    });
}

11、价格格式（Decimal）

import Decimal from "decimal.js";

export const formatNumber(val = 0) {
   isNaN(val) ? (val = 0) : val;
   val = (val * 1).toLocaleString("zh", {minimumFractionDigits: 2});
   return (new Decimal(val).toNumber().toFixed(2))
}

未完待续，持续更新中。。。