javascript-工作中实用方法整理

1.获取浏览器地址栏?后的所有参数

1. 获取所有

getUrlParams = (url) => {
  let str = url;
  const num = str.indexOf("?");
  str = str.substr(num + 1); // 取得所有参数
  if (!str) {
    return {};
  }
  const params = {};
  const arr = str.split("&"); // 各个参数放到数组里
  for (let i = 0; i < arr.length; i += 1) {
    if (arr[i]) {
      const keys = arr[i].split("=");
      // params[keys[0]] = keys[1]
      const value = keys[1];
      params[keys[0]] = value;
    }
  }
  return params;
};

// 示例：
const testUrl =
     `http://219.232.216.237/hotline-app/?origin=1&t=${Date.parse(new Date()) / 1000}`;
const params = this.getUrlParams(testUrl); // 调用 {origin: '1', t: '1746521856'}

2. 获取单个

export function getUrlParam(name) {
  let urlArr = window.location.href.split('?')
  if (urlArr.length < 2) {
    return ''
  }
  let tempArr = urlArr[1].split('&')
  for (let i = 0; i < tempArr.length; i++) {
    let item = tempArr[i].split('=')
    if (item[0].trim() == name) {
      return item[1]
    }
  }
  return ''
}

2.日期时间相关

1. 获取当天

// 获取当天
getCurrentDate=()=>{
  const date = new Date()
  const year = String(date.getFullYear())
  const month = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : `0${date.getMonth() + 1}` // 获取月
  const day = date.getDate() >= 10 ? date.getDate() : `0${date.getDate()}`
  return `${year}/${String(month)}/${String(day)}`
}

2. 获取年月日 时分秒

// 获取年月日 时分秒
const GetfullDateFormat = (time) => {
  let now = new Date()
  if (time) { now = new Date(time) }
  const year = now.getFullYear();  // 取得4位数的年份
  const month = now.getMonth()+ 1< 10?`0${now.getMonth() + 1}`: now.getMonth() + 1 //取得日期中的月份，其中0表示1月，11表示12月
  const date = now.getDate() < 10 ? `0${now.getDate()}` : now.getDate() //返回日期月份中的天数（1到31）
  const hour = now.getHours() < 10 ? `0${now.getHours()}` : now.getHours() //返回日期中的小时数（0到23）
  const minute = now.getMinutes() < 10 ? `0${now.getMinutes()}` : now.getMinutes() //返回日期中的分钟数（0到59）
  const second = now.getSeconds() < 10 ? `0${now.getSeconds()}` : now.getSeconds() //返回日期中的秒数（0到59）
  return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
}

3. 比较2时间

// 需求：结束时间要大于开始时间
// 1. 比较2时间
var startTime = new Date(date)
var endTime = new Date(date1)
if (startTime.getTime() - endTime.getTime() < 0) {
  console.log('通过', data.getTime(), data1.getTime())
} else {
  this.$message.warning('结束时间要大于开始时间!')
}

4.日期组件-不可选择范围的运用

// 日期组件的运用
<j-date
  v-decorator="['fdEndDate', validatorRules.fdEndDate]"
  placeholder="请选择服务结束时间"
  :showTime="true"
  :dateFormat="dateFormat"
  @change="handleDateChange"
  :value="fdEndDate"
  :disabled-date="disabledDate"
  />
// 结束时间的不可选择范围
disabledDate(current) {
  const test00 = moment(this.fdStartDate, 'YYYY-MM-DD HH:mm:ss').add(10, 'minutes')
  const test11 = moment(this.fdStartDate, 'YYYY-MM-DD HH:mm:ss').endOf('day')
  return current < test00 || current > test11 // <开始时间之前的不可选 || >当天 23:59:59之前的时间可选
}
// 开始时间的不可选择范围
disabledStartDate(current) {
  let disabledMoment = moment(this.fdStartDate, 'YYYY-MM-DD HH:mm:ss') // 当前时间之前的不可选
  let date = moment(this.fdStartDate).format('YYYY-MM-DD')
  let result = `${date} 23:59:59` // 当天23:59:59后的 不可选
  return current < disabledMoment || current > moment(result)
}

5.moment.js封装时间参数

setParams = type => {
  const { defaultYear,defaultMonth,defaultDay,beginDate,endDate } = this.state
  let paramObj = {}
  if (type === '按日' || type === '本日') {
    paramObj = {
      fdDateType: 1, // 时间维度 1日，2月，3年
      fdYear: defaultYear,
      fdMonth: defaultMonth, // 月 为空或0且fdDateType = 2时默认当月
      fdDay: defaultDay, // 日 为空或0且fdDateType = 1时默认当日
      beginFdDateid: '',
      endFdDateid: ''
    }
  } else if (type === '上一日') {
    const m = moment().subtract(1, 'days')
    paramObj = {
      fdDateType: 1, // 时间维度 1日，2月，3年
      fdYear: m.format('YYYY'),
      fdMonth: m.format('MM'), // 月 为空或0且fdDateType = 2时默认当月
      fdDay: m.format('DD'), // 日 为空或0且fdDateType = 1时默认当日
      beginFdDateid: '', endFdDateid: ''
    }
  } else if (type === '下一日') {
    const m = moment().add(1, 'days')
    paramObj = {
      fdDateType: 1, // 时间维度 1日，2月，3年
      fdYear: m.format('YYYY'),
      fdMonth: m.format('MM'), // 月 为空或0且fdDateType = 2时默认当月
      fdDay: m.format('DD'), // 日 为空或0且fdDateType = 1时默认当日
      beginFdDateid: '', endFdDateid: ''
    }
  } else if (type === '按年-月' || type === '当月') {
    paramObj = {
      fdDateType: 2, fdYear: defaultYear,fdMonth: defaultMonth,fdDay: '',beginFdDateid: '',endFdDateid: ''}
  } else if (type === '上一月') {
    const m = moment().year(defaultYear).month(defaultMonth - 1).subtract(1, 'month')
    paramObj = {
      fdDateType: 2,
      fdYear: m.format('YYYY'),
      fdMonth: m.format('MM'),
      fdDay: '',
      beginFdDateid: '',
      endFdDateid: ''
    }
  } else if (type === '下一月') {
    const m = moment().year(defaultYear).month(defaultMonth - 1).add(1, 'month')
    paramObj = {fdDateType:2,fdYear:m.format('YYYY'),fdMonth:m.format('MM'),fdDay:'',beginFdDateid:'',endFdDateid:''}
  } else if (type === '自定义') {
    paramObj = {fdDateType: 1,fdYear: '',fdMonth: '',fdDay: '',beginFdDateid: beginDate,endFdDateid: endDate }
  }
  // console.log(paramObj)
  return paramObj
}

6.计算时间差

// 计算时间差函数 params=fdStartDate开始服务时间
  timeFn = params => {
    let dateBegin = new Date(params.replace(/-/g, "/")); //将-转化为/，使用new Date
    let dateEnd = new Date(); //获取当前时间
    let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
    let dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
    let leave1 = dateDiff % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
    let hours = Math.floor(leave1 / (3600 * 1000)); //计算出小时数
    hours = hours < 10 ? `0${hours}` : hours;
    //计算相差分钟数
    let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
    let minutes = Math.floor(leave2 / (60 * 1000)); //计算相差分钟数
    minutes = minutes < 10 ? `0${minutes}` : minutes;
    //计算相差秒数
    let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
    let seconds = Math.round(leave3 / 1000);
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    // console.log(dayDiff, `已经花费${dayDiff}天${hours}小时${minutes}分${seconds}秒`)
    if (dayDiff >= 1) {
      hours = Number(dayDiff) * 24 + Number(hours);
    }
    this.setState({ hours: hours, minutes: minutes, seconds: seconds });
  };

3. 身份证号的加密&根据身份证号获取年龄、性别

// 身份证加密
const idCardEncry = function (idCard) {
  let newIdCard = "";
  if (idCard) {
    const start = idCard.substring(0, 6);
    const center = "******";
    const last = idCard.substring(idCard.length - 4);
    newIdCard = start + center + last;
  }
  return newIdCard;
};

// 根据身份证号 获取性别、年龄、出生日期
getGenderAge(IdCard, type) {
  if (type === 1) {
    //获取出生日期
    let birthday = IdCard.substring(6, 10) + "-" + IdCard.substring(10, 12) + "-" + IdCard.substring(12, 14)
    return birthday
  }
  if (type === 2) {
    //获取性别
    if (parseInt(IdCard.substr(16, 1)) % 2 === 1) {
      return "男"
    } else {
      return "女"
    }
  }
  if (type === 3) {
    var birthDay = IdCard.substring(6, 14);
    var now = new Date();
    var year = now.getFullYear();  //取得4位数的年份
    var month = now.getMonth() + 1 < 10 ? `0${now.getMonth() + 1}` : now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
    var date = now.getDate() < 10 ? `0${now.getDate()}` : now.getDate();      //返回日期月份中的天数（1到31）
    var time = year + "-" + month + "-" + date // 格式化后的当前时间
    // console.log('time', time)
    var yearStr = time.split("-")[0];
    var monthStr = time.split("-")[1];
    var dayStr = time.split("-")[2];
    var yearBirthStr = birthDay.substring(0, 4);
    var monthBirthStr = birthDay.substring(4, 6);
    var dayBirthStr = birthDay.substring(6);
    var year = yearStr;
    var yearBirth = yearBirthStr;
    if (year - yearBirth <= 0) {
      return 0;
    }
    var age = year - yearBirth;
    var month = monthStr;
    var monthBirth = monthBirthStr;
    if (month - monthBirth > 0) {
      return age;
    }
    if (month - monthBirth < 0) {
      return --age;
    }
    var day = dayStr;
    var dayBirth = dayBirthStr;
    if (day - dayBirth >= 0) {
      return age;
    }
    return --age;
  }
}

4.正则表达式相关

1. 驼峰英文遇到大写字母转小写并前面+下划线

const str = 'goodsCommonName'
str.replace(/([A-Z])/g, "_$1").toLowerCase() // goods_common_name

2.手机号码验证

const patt = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
使用：if(!this.patt.test(phone)){ this.$message.error('请输入正确的联系方式!') }

3.身份证号校验&脱敏

// 身份证号校验  if (!this.checkCard(submitObj.fdCard)){ 请输入正确的证件号码 }
checkCard = (value) => {
    let reg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
    if (reg.test(value)) {
      return true
    } else {
      return false
    }
}


// 身份证号脱敏
checkFdCard = (card) => {
  if (card) {
    return card.replace(/^(.{4}).+(.{4})$/, "$1********$2")
  } else { return ''}
}

4. 数字值允许0的验证

 // 实付金额 允许0的验证      if (!this.checkIsNull(payValue)) {  请正确填写实付金额 }
  checkIsNull(str) {
    // 允许输入0
    if (str === 0) {
      return true
    }
    return !str ? false : true
  }

5.校验姓名

checkFdName = (fdName) => {
  let reg = /^[A-Za-z\u4e00-\u9fa5]{2,10}$/; // 不能有符号、数字，必须够2个字符长度
  if (reg.test(fdName)) {
    return true
  } else {
    return false
  }
}

6.电话号码加密展示

const phoneObj = phone => {
  phone = phone || ''
  if (phone) {
    phone = "" + phone;
    var reg = /(\d{3})\d{4}(\d{4})/; //正则表达式
    var phone = phone.replace(reg, "$1****$2")
  }
  return phone
}

7.校验北京通、一卡通卡号

// 校验北京通卡号
checkBjtCard = (value) => {
  let reg = /\b\d{12}\b/;   //  必须为12位数字的正则表达式
  if (reg.test(value)) {
    return true
  } else {
    return false
  }
}

// 校验一卡通卡卡号
checkYktCard = (value) => {
  let reg = /\b\d{20}\b/;   //  必须为20位数字的正则表达式
  if (reg.test(value)) {
    return true
  } else {
    return false
  }
}

8.校验银行卡号

// 校验银行卡号
checkBankCard = (value) => {
  // let reg = /^([1-9]{1})(\d{15}|\d{18})$/;   //  必须为16||19位数字的正则表达式   
  let reg = /^([6][2][1])(\d{16})$/;    //  必须以621开头共19位数字
  if (reg.test(value)) {
    return true
  } else {
    return false
  }
}

5.数组数据-正序 倒序

// 正序
ascSortData = (list, key) => {
  const newList = list.sort((a, b) => {
    if (a[key] >= b[key]) {
      return 1;
    }
    return -1;
  });
  return newList;
};

// 倒序
export const descSortData = (list, key) => {
  return list.sort((a, b) => {
    if (a[key] > b[key]) {
      return -1;
    }
    return 1;
  });
};

6.数据不足几位数时,前面补0

export const padStart = (n, str) => {
  return Array(str.length >= n ? 0 : n - str.length + 1).join('0') + str
}

// 调用函数
mapTop3Total.map(itm => {
  return padStart(4, String(itm.value)).split('')
})

7.移除script标签

// 根据tab标签加载对应的脚本
function setTabScript() {
    var script = document.createElement("script");
    script.src = tab === 0 ? './js/report.js?v=2' : './js/report-weekly.js?v=2';
    script.id = tab === 0 ? 'script01' : 'script02';
    document.getElementsByTagName("body")[0].appendChild(script);
    if (tab === 0) {
        $('.h5').css('display', 'block')
    }
}


// 标签栏监听 toggleTabs
$('.tab-item').each(function (i, v) {
    if (tab === i) {
      $(v).addClass('active')
      $(v).siblings(".tab-item").removeClass("active");
    }
    $(v).click(function () {
      // console.log('标签栏监听-点我了', i)
      tab = i
      $(this).addClass('active') // 当前点击的添加类
      $(this).siblings(".tab-item").removeClass("active"); // 其它兄弟移除类
      currentDate = getCurrentDate()
      $('#calendarInput').html(currentDate)
      $('.body-weekly').css("display", i === 0 ? 'none' : 'block')
      $('.body-daily').css("display", i === 0 ? 'block' : 'none')
      if (i === 0) {
        getAjax()
      } else {
        getWeeklyAjax()
      }
      isIncludeScript('script02')
      isIncludeScript('script01')  // 使用：isIncludeScript('script01')
    })
})

// 在不同周报下 判断是否包含另一个报告的js脚本文件
function isIncludeScript(scriptId) {
  var scriptElement = document.getElementById(scriptId); // "script01" 为需要删除的 script 元素的 id
  // 判断 script 元素存在并且已经加载完成后再进行删除操作
  if (scriptElement && scriptElement.readyState === 'complete') {
    scriptElement.parentNode.removeChild(scriptElement); // 从 DOM 结构中移除该 script 元素
    // console.log('从 DOM 结构中移除该 script 元素',)
  } else if (!scriptElement) {
    // console.log('未找到对应的 script 元素');
  } else {
    // console.log('脚本正在加载或者还没有加载完成',);
    scriptElement.parentNode.removeChild(scriptElement); // 从 DOM 结构中移除该 script 元素
  }
}

8.解决跨域(浏览器配置)

http-proxy-middleware  // react-解决跨域的某包

chrome.exe // 复制一份.exe程序,右键-属性-目标：
目标："C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir=C:\MyChromeDevUserData

9.判断一个对象是否是空对象

// 方法1
function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}

// 方法2
function isEmptyObject(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false;
    }
  }
  return true;
}

// 方法3
function isEmptyObject(obj) {
  return JSON.stringify(obj) === '{}';
}

10.获取IE的版本

// 获取IE的版本
function getIEVersion() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie), 10));
  }
  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv), 10));
  }
  return -1;
}

// 判断是否是ie浏览器
function getIEVersion() {
  var userAgent = window.navigator.userAgent; //取得浏览器的userAgent字符串
  var versionFlag = ''
  var isIE =
    userAgent.indexOf("compatible") > -1 &&
    userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
  var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
  var isIE11 =
    userAgent.indexOf("Trident") > -1 &&
    userAgent.indexOf("rv:11.0") > -1;
  if (isIE) {
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
    reIE.test(userAgent);
    var fIEVersion = parseFloat(RegExp["$1"]);
    versionFlag = fIEVersion; // 当前的的ie版本
  } else if (isEdge) {
    versionFlag = "edge"; //edge
  } else if (isIE11) {
    versionFlag = 11
  } else {
    versionFlag = -1 //不是ie浏览器
  }
  return versionFlag
}

11.根据host主机判断是ip还是域名

function isIPAddress(input) {
  // 正则表达式来匹配IP地址
  var ipRegex = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
  return ipRegex.test(input);
}

// 判断当前
function checkAddressType() {
  var input = window.location.hostname; // 获取当前页面的主机名
  if (isIPAddress(input)) {
    return 'ip';
  } else {
    // console.log("地址栏中的文本是域名");
    return 'yuming';
  }
}

12.富文本-去除所有html标签,只保留文字

// 去除所有html标签，只保留文字
function removeAllHtmlReg(text){
  var reg=/<\/?.+?\/?>/g  // 去除所有html标签，只保留文字
  var removed = text.replace(reg, '')
  var reg01 = /[&ldquo;,&rdquo;,&nbsp;,\s]+/g // 去除其它字符 \s:空格
  var removed01 = removed.replace(reg01, '')
  return removed01
}

// 实例：
// 搜索列表显示的内容：  读取详情页里的富文本内容字段 start
var intro = removeAllHtmlReg(v.fd_content) // 01 先去除富文本里所有html标签和其他字符
var keywordIndex = intro.indexOf(substr) // 02 找到匹配到关键词的第一个
var slicedText = ''
if(keywordIndex>10){
    slicedText = intro.substr(keywordIndex-10) // 03 根据关键词的索引向前截取10个字符
}else{
    slicedText = intro.substr(keywordIndex)
}
if(slicedText.length >= 139){
    slicedText = slicedText.substr(0,138) + '...'; // 04 超过2行的...
}
var introductionStr = slicedText ? slicedText.replace(new RegExp(substr, 'gi'), function(match){
    return "<strong class=highlight>"+match+"</strong>"  // 05 高亮关键词
}):'';
// 搜索列表显示的内容：  读取详情页里的富文本内容字段 end

// strong 标签改span
relaceContent = (content)=>{
  let result = ''
  var reg01 = /<strong /gi // strong 标签改span
  result = content.replace(reg01, '<span ')
  return result
}

13.下载文件

1.blob+创建a标签

// 下载文件
function downFile(url, fileName) {
  // console.log("new Blob方式下载-url+fileName", url, fileName);
  $.ajax({
    url: url,
    type: "GET",
    responseType: "blob", // 设置返回数据类型为blob
    success: function (blobData) {
      // console.log("下载文件成功");
      var url = window.URL.createObjectURL(new Blob([blobData]));
      var link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
    },
    error: function (err) {
      console.log("下载文件失败", err);
    },
  });
}

2.a标签(超链接)方式

// 附件处理
renderFilesHtml = ()=>{
    const {detailObj} = this.state
    const fileList = detailObj.fdAnnex && detailObj.fdAnnex.split(',')
    // console.log('fileList',fileList)
    const html = fileList.map(x=>{
      var fileName = x.split('/')[1]
      const url = ImgUrl + x
      // 文件名后面不显示_后面的一串标识文字
      const index01 = fileName.indexOf('_')
      const index02 = fileName.indexOf('.')
      const cut = fileName.slice(index01,index02)
      const cutedFileName = fileName.replace(cut,'')
      return (
        <p onClick={()=>this.downLoadFile(url, fileName)}>{cutedFileName}</p>
      )
    })
    return html
}

// 下载文件
downLoadFile = (url, fileName) =>{
    // console.log("下载文件", url, fileName);
    const eleLink = document.createElement('a');
    eleLink.style.display = 'none';
    eleLink.href = url;
    document.body.appendChild(eleLink);
    eleLink.click();
    document.body.removeChild(eleLink);
}

14.react页面回到顶部功能

class DtywDetail extends Component {
  constructor(props) {
    super(props);
    this.state={
      detailObj:{},
      isShowGoTop:false,
      mainHeight:0,
      loading: true
    }
    this.mainRef = React.createRef(); 
    // <div className='main' style={{ height: 'auto', minHeight: '480px' }} ref={this.mainRef}>
  }

componentDidMount() {
    this.getData(this.id)
    window.addEventListener('scroll', this.HandleScroll, true) 
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

// 监听页面滚动
HandleScroll = ()=>{
    // console.log('监听页面滚动',  window.scrollY)
    const { mainHeight } = this.state
    if(mainHeight >= 300 && window.scrollY >= 300){
      this.setState({ isShowGoTop: true })
    }else{
      this.setState({ isShowGoTop: false })
    }
}

// 回到顶部
goTop = ()=>{
    document.body.scrollTop = document.documentElement.scrollTop = 0
}

// 计算返回顶部的位置
goTopPosition = ()=>{
    let scrollHeight = document.body.scrollHeight
    let windowHeight = window.innerHeight
    let maxSroll = scrollHeight-windowHeight
    let str = '30px'
    if(maxSroll - window.scrollY <= 240){
      str = '300px'
    }
    return str
}

// 页面结构：根据isShowGoTop控制显示隐藏
<div className='goTop' style={{ display: isShowGoTop ? 'block':'none', bottom: this.goTopPosition() }} onClick={()=>this.goTop()}><img src={goTopIcon} /></div>

15.react中解析富文本

relaceContent = (content)=>{
  let result = ''
  var reg01 = /<strong /gi // strong 标签改span
  result = content.replace(reg01, '<span ')
  return result
}

{ detailObj.fdContent && (
    <div className="content">
        <div
          dangerouslySetInnerHTML={{
            // __html: detailObj.fdContent
            __html: this.relaceContent(detailObj.fdContent)
          }}
        />
  </div>
) }

16.