JS解析和转化日期格式

广告位招租
扫码页面底部二维码联系

使用过moment这个库的同学应该对它的【原创内容,转载请注明出处】【作者:唐霜】格式化功能非常喜欢。但是,我们不可能为了原创内容,盗版必究。【原创不易,请尊重版权】一个格式化功能,而引入整个moment库未经授权,禁止复制转载。【原创不易,请尊重版权】。这篇文章,提供了一个没有依赖的日期格式转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net工具。

著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshua原创内容,盗版必究。【关注微信公众号:wwwtangshuangnet】ng.net

识别日期格式

这里所提的日期,主要是指字符串形式的日期【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】格式。我们通常的情况是,想将某种字符串形【本文受版权保护】【原创内容,转载请注明出处】式的日期,转化为其他格式的日期,例如,将【未经授权禁止转载】【未经授权禁止转载】2019/12/20转化为2019-12转载请注明出处:www.tangshuang.net【作者:唐霜】-20这种格式。如果单纯考虑是字符串,直【本文受版权保护】【未经授权禁止转载】接替换/为-即可,干嘛那么麻烦?但是,由【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net于不同系统中可能需要适应具体的格式场景,【未经授权禁止转载】未经授权,禁止复制转载。所以,就需要一个日期的格式切换工具。但,【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。问题在于,如何识别原日期格式呢?举个例子【访问 www.tangshuang.net 获取更多精彩内容】原创内容,盗版必究。,05/06到底是指5月6日,还是指6月【原创不易,请尊重版权】【版权所有,侵权必究】5日呢?如果没有辅助信息,我们无从判定。

【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu【关注微信公众号:wwwtangshuangnet】未经授权,禁止复制转载。ang.net【本文受版权保护】

通过givenFormatter来判别它本文版权归作者所有,未经授权不得转载。【本文受版权保护】到底是什么格式,如果你传了MM/DD,那原创内容,盗版必究。【作者:唐霜】么我就可以知道,这是5月6日。因此,我们【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。的首要任务,是可以通过givenForm原创内容,盗版必究。未经授权,禁止复制转载。atter来识别原有的日期格式。

【转载请注明来源】【关注微信公众号:wwwtangshua【关注微信公众号:wwwtangshuangnet】【版权所有,侵权必究】ngnet】【版权所有,侵权必究】

既然是formatter,那么,我们就要【本文受版权保护】【原创内容,转载请注明出处】定制一个规则,不是用户自己想怎么传就可以【本文受版权保护】【关注微信公众号:wwwtangshuangnet】怎么传的。参照moment的格式,我做了著作权归作者所有,禁止商业用途转载。【作者:唐霜】如下规定:

【作者:唐霜】【原创内容,转载请注明出处】【关注微信公众号:wwwtangshua本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。ngnet】
export const DATE_MONTHS = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec',
]
export const DATE_WEEKS = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thur',
  'Fri',
  'Sat',
]
export const DATE_EXPS = {
  YYYY: '[12][0-9]{3}',
  YY: '[0-9]{2}',
  M: '[1-9]|1[0-2]',
  MM: '0[1-9]|1[0-2]',
  MMM: DATE_MONTHS.join('|'),
  D: '[1-9]|[1-2][0-9]|3[0-1]',
  DD: '[0-2][0-9]|3[0-1]',
  W: '[0-6]',
  WWW: DATE_WEEKS.join('|'),
  H: '[0-9]|1[0-9]|2[0-3]',
  HH: '[01][0-9]|2[0-3]',
  h: '[0-9]|1[0-2]',
  hh: '0[0-9]|1[0-2]',
  a: 'am|pm',
  A: 'AM|PM',
  m: '[0-9]|[1-5][0-9]',
  mm: '[0-5][0-9]',
  s: '[0-9]|[1-5][0-9]',
  ss: '[0-5][0-9]',
  S: '[0-9]|[1-9][0-9]|[1-9][0-9]{2}',
  SSS: '[0-9]{3}',
}

你可以很容易看出,这些配置是为正则表达式【原创不易,请尊重版权】【本文首发于唐霜的博客】准备的。我们要识别传入的日期是什么格式,未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。肯定需要借助正则表达式的能力。这做了如上本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。规定之后,我们就可以对用户传入的日期格式原创内容,盗版必究。【本文首发于唐霜的博客】进行解析了,得到每一个位置上的值。例如:

【本文受版权保护】原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。【版权所有,侵权必究】
用户传入:2014/05/06 8:43 am
给定格式:YYYY/DD/MM h:m a

那么经过解析之后,我可以得到一个对象:

转载请注明出处:www.tangshua【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】ng.net【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】ngnet】【作者:唐霜】【访问 www.tangshuang.n【版权所有,侵权必究】【作者:唐霜】et 获取更多精彩内容】
{
  YYYY: '2014',
  DD: '05',
  MM: '06',
  h: '8',
  m: '43',
  a: 'am',
}

通过这些信息,我再用Date得到一个时间原创内容,盗版必究。【本文首发于唐霜的博客】戳。

原创内容,盗版必究。著作权归作者所有,禁止商业用途转载。
const date = new Date(2014, 5, 5, 8, 43, 00)

有了这个date,取什么数据都可以取得到【原创不易,请尊重版权】【版权所有,侵权必究】了。现在,我们得到了解析后的日期,把它放未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】在这里备用。

本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】原创内容,盗版必究。本文作者:唐霜,转载请注明出处。

转化日期格式

上面,我们已经得到一个经过解析后的日期对未经授权,禁止复制转载。原创内容,盗版必究。象。我们已经顺利拿到了用户给的日期。现在【本文受版权保护】本文作者:唐霜,转载请注明出处。,我们要将日期进行格式化,并输出为用户期【转载请注明来源】著作权归作者所有,禁止商业用途转载。望的格式。

原创内容,盗版必究。【原创不易,请尊重版权】【原创内容,转载请注明出处】
export const DATE_FORMATTERS = {
  YYYY: date => date.getFullYear() + '',
  YY: date => (date.getFullYear() % 100) + '',
  M: date => (date.getMonth() + 1) + '',
  MM: date => pad(date.getMonth() + 1),
  MMM: date => DATE_MONTHS[date.getMonth()],
  D: date => date.getDate() + '',
  DD: date => pad(date.getDate()),
  W: date => date.getDay() + '',
  WWW: date => DATE_WEEKS[date.getDay()],
  H: date => date.getHours() + '',
  HH: date => pad(date.getHours()),
  h: date => date.getHours() % 12 + '',
  hh: date => pad(date.getHours() % 12),
  a: date => date.getHours() < 12 ? 'am' : 'pm',
  A: date => date.getHours() < 12 ? 'AM' : 'PM',
  m: date => date.getMinutes() + '',
  mm: date => pad(date.getMinutes()),
  s: date => date.getSeconds() + '',
  ss: date => pad(date.getSeconds()),
  SSS: date => date.getMilliseconds() + '',
}

我定制了一个集合,用于获取每一个格式它需本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。要输出日期的什么内容。但是,核心是我们有【原创内容,转载请注明出处】【原创内容,转载请注明出处】了date,也得到了用户给我们的目标日期著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。格式,但是,我们怎么保持用户给定格式中的【版权所有,侵权必究】【转载请注明来源】噪声(例如下面时间中的冒号:)?

【关注微信公众号:wwwtangshua本文版权归作者所有,未经授权不得转载。【未经授权禁止转载】ngnet】本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】
用户期望:WWW MMM DD YYYY HH:mm:ss

我们如何确保按照这个格式输出用户想要的结未经授权,禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】果呢?显然,遍历字符串是一个笨方法。我们【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net这里用到了正则表达式的能力:

转载请注明出处:www.tangshua【本文受版权保护】转载请注明出处:www.tangshuang.netng.net【版权所有,侵权必究】【版权所有】唐霜 www.tangshu转载请注明出处:www.tangshuang.net本文版权归作者所有,未经授权不得转载。ang.net【本文受版权保护】
const output = formatter.replace(reg, (matched, found) => {
  return DATE_FORMATTERS[found](date)
})

这段代码里的reg则是根据DATE_FO【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】RMATTERS的键名来连接的。

【原创不易,请尊重版权】【转载请注明来源】
const keys = Object.keys(DATE_FORMATTERS)
const reg = new RegExp('(' + keys.join('|') + ')', 'g')

通过这种方式,我们替换掉了给定的格式里面【关注微信公众号:wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net的对应的值,这解决了我们保留噪声的需要。

【原创不易,请尊重版权】【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】

解决日期创建时的问题

在上面得到date时,会有一些小问题。在【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.netjs自带的日期系统中,我们有两个地方需要转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。做硬性的规定,一个是月份的地方,一个是小【访问 www.tangshuang.net 获取更多精彩内容】未经授权,禁止复制转载。时的声音。用户在给出一个时间格式的时候,【转载请注明来源】【作者:唐霜】月份有可能是数字的形式,但也有可能是Ja未经授权,禁止复制转载。【本文首发于唐霜的博客】n这种字符形式。小时有可能是12小时制也【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。可能是24小时制。怎么解决这个问题呢?

【版权所有】唐霜 www.tangshu未经授权,禁止复制转载。【版权所有】唐霜 www.tangshuang.netang.net原创内容,盗版必究。【版权所有】唐霜 www.tangshu【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】ang.net【版权所有】唐霜 www.tangshu本文作者:唐霜,转载请注明出处。【本文首发于唐霜的博客】ang.net

实际上,只需要几个简单的判定即可。

本文版权归作者所有,未经授权不得转载。著作权归作者所有,禁止商业用途转载。
const Y = +(parsedDate.YYYY || ('20' + parsedDate.YY)) || (new Date().getFullYear())
const D = +(parsedDate.DD || parsedDate.D) || 1
const m = +(parsedDate.mm || parsedDate.m) || 0
const s = +(parsedDate.ss || parsedDate.s) || 0

var M
if (parsedDate.MM || parsedDate.M) {
  M = +(parsedDate.MM || parsedDate.M) - 1 || 0
}
else if (parsedDate.MMM) {
  let m = parsedDate.MMM
  let i = DATE_MONTHS.indexOf(m)
  i = i === - 1 ? 0 : i
  M = i
}
else {
  M = 0
}

var H
if (parsedDate.HH || parsedDate.H) {
  H = +(parsedDate.HH || parsedDate.H) || 0
}
else if (parsedDate.hh || parsedDate.h) {
  let a = (parsedDate.a || parsedDate.A || 'am').toLowerCase()
  let h = +(parsedDate.hh || parsedDate.h) || 0
  H = a === 'pm' ? h + 12 : h
}
else {
  H = 0
}

const date = new Date(Y, M, D, H, m, s)
不需要特别的技术去处理。
【版权所有】唐霜 www.tangshu【本文受版权保护】【关注微信公众号:wwwtangshuangnet】ang.net【转载请注明来源】本文作者:唐霜,转载请注明出处。

保留关键字噪声

在一些场景中,我们可能还需要保留一些关键本文版权归作者所有,未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】词不被替换为时间内容。比如我就是想在转化本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshuang.net的字符串中保留一个D字母,但是因为D是格【版权所有】唐霜 www.tangshuang.net【原创不易,请尊重版权】式化规则中的关键字,那么怎么保留呢?
【本文受版权保护】本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。
我们可以通过转义的方式来实现。但是,\转本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。义在字符串中会直接产生效果,也就是说,在【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.net原始字符串中写’HH\s&#【原创不易,请尊重版权】【关注微信公众号:wwwtangshuangnet】8217;这样的字符串是不行的,\s表示未经授权,禁止复制转载。【未经授权禁止转载】一个空格,原始字符串就没有s这个字母了。【原创内容,转载请注明出处】【关注微信公众号:wwwtangshuangnet】所以,我们使用两个\\表示一个转义符。
【本文受版权保护】【未经授权禁止转载】
用户提供:YY-MM-DD h:m:s S\\m\\s

上面的格式字符串中\\m\\s最后得到的【版权所有,侵权必究】【版权所有,侵权必究】是ms这两个字母。那这个又是怎么去实现呢【未经授权禁止转载】未经授权,禁止复制转载。

【原创不易,请尊重版权】【版权所有】唐霜 www.tangshu【本文受版权保护】【本文首发于唐霜的博客】ang.net

第一步是在对用户提供的格式字符串中进行转【原创内容,转载请注明出处】【本文受版权保护】义的识别,那些被转义的部分,不进行格式识【版权所有】唐霜 www.tangshuang.net【版权所有,侵权必究】别转化。

转载请注明出处:www.tangshua【作者:唐霜】【作者:唐霜】ng.net原创内容,盗版必究。
const parserKeys = getFormatterKeys()
const formatterExp = '(?<!\\\\)(' + parserKeys.join('|') + ')'
const formatterReg = new RegExp(formatterExp, 'g')

上面红色的部分是正则断言的一种方式,在正原创内容,盗版必究。原创内容,盗版必究。则匹配时,将不会去匹配前面有\\的关键字转载请注明出处:www.tangshuang.net【版权所有,侵权必究】

本文作者:唐霜,转载请注明出处。【版权所有】唐霜 www.tangshu【原创不易,请尊重版权】转载请注明出处:www.tangshuang.netang.net原创内容,盗版必究。原创内容,盗版必究。

第二步是在输出结果时,将\\去掉。

著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。【关注微信公众号:wwwtangshua【版权所有,侵权必究】原创内容,盗版必究。ngnet】
const parserKeys = getFormatterKeys()
const formatterExp = '\\\\\\\\(' + parserKeys.join('|') + ')'
const formatterReg = new RegExp(formatterExp, 'g')

const res = output.replace(formatterReg, (matched, found) => {
  return found
})

这样就可以替换掉\\,直接输出字母。

【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netang.net【关注微信公众号:wwwtangshua【作者:唐霜】【本文受版权保护】ngnet】【访问 www.tangshuang.n【作者:唐霜】转载请注明出处:www.tangshuang.netet 获取更多精彩内容】未经授权,禁止复制转载。

结语

本文详细解释了如何实现js日期格式转化的【未经授权禁止转载】本文版权归作者所有,未经授权不得转载。思路。你可以通过这里阅读源码。其中非常重要的就是利用Stri【原创内容,转载请注明出处】【版权所有】唐霜 www.tangshuang.netng.replace和RegExp配合,本文作者:唐霜,转载请注明出处。【版权所有,侵权必究】在replace的第二个参数传入函数来进未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。行处理,达到格式化中保持原有噪声的效果。著作权归作者所有,禁止商业用途转载。【作者:唐霜】如果你对本文中描述的内容有问题,可以通过【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】下方评论框和我讨论。

原创内容,盗版必究。本文作者:唐霜,转载请注明出处。【转载请注明来源】著作权归作者所有,禁止商业用途转载。

2019-06-23 6280 ,

为价值买单,打赏一杯咖啡

本文价值62.8RMB