如何更改 JSON 已解析数据的日期格式

How to change date format of JSON parsed data

在我解析的 JSON 数据中,我有一个这样输出的日期:

SessionStartTime: "2022-04-14T08:30:00-07:00" 这就是它在我的 HTML.

中的打印方式

如何分离和更改此格式并获取时间并像这样显示“8:30 - 7:00”和像这样的日期“04/14/2022”?是否可以按原样使用解析后的字符串,还是应该先将其转换为日期类型,然后再更改其格式?

您可以使用字符串,但我认为只调用 date.parse

会更容易
Date.parse(date).toLocaleDateString('en-US')

有几种可能的方法。

接下来的2个提供的是基于拆分,一次或两次。

第一个基于正则表达式,其中可以从拆分结果中检索无效的 date-fragment 以及时间和区域。从那里已经可以 re/assemble 通过语言环境字符串格式和模板文字得到结果字符串。

console.log(
  `"2022-04-14T08:30:00-07:00".split(/([+-]*\d{2}:\d{2})/) ...`,
  "2022-04-14T08:30:00-07:00".split(/([+-]*\d{2}:\d{2})/)
);

const [
  dateFragment,
  time,
  _,
  zone,
] = "2022-04-14T08:30:00-07:00".split(/([+-]*\d{2}:\d{2})/);

console.log({ dateFragment, time, zone });
console.log(
  'end result ...',
  `${ new Date(dateFragment.slice(0, -1)).toLocaleDateString('en-US') } ${ time } ${ zone }`
);
.as-console-wrapper { min-height: 100%!important; top: 0; }

或者,不是 new Date(...).toLocaleDateString('en-US') 而是第二次拆分......这里是 : 处的无效但切片的日期片段,以便检索年,月和日期......和 ​​assemble 结果字符串也通过模板文字。

const [
  dateFragment,
  time,
  _,
  zone,
] = "2022-04-14T08:30:00+02:00".split(/([+-]*\d{2}:\d{2})/);

console.log({ dateFragment, time, zone });

const [
  year,
  month,
  date,
] = dateFragment.slice(0, -1).split('-');

console.log({ year, month, date });
console.log(
  'end result ...',
  `${ month }/${ date }/${ year } ${ time } ${ zone }`
);
.as-console-wrapper { min-height: 100%!important; top: 0; }

也有可能 matching/capturing 相关部分由单个正则表达式组成,例如... /(?<date>\d{4}-\d{2}-\d{2})T(?<time>\d{2}:\d{2}):\d{2}(?<zone>[+-]\d{2}:?\d{2})/.

此正则表达式使用命名捕获组,基于这种方法的解决方案可能与下一个提供的解决方案相似...

// see ... [https://regex101.com/r/sYzrA7/1]
const regXCaptureDataTimeAndZone =
  /(?<date>\d{4}-\d{2}-\d{2})T(?<time>\d{2}:\d{2}):\d{2}(?<zone>[+-]\d{2}:?\d{2})/;

const {
  date,
  time,
  zone,
} = regXCaptureDataTimeAndZone
  .exec("2022-04-14T08:30:00-07:00")
  ?.groups ?? {};

console.log({ date, time, zone });
console.log(
  'end result ...',
  `${ new Date(date).toLocaleDateString('en-US') } ${ time } ${ zone }`
);
.as-console-wrapper { min-height: 100%!important; top: 0; }