.replace() with REGEX expression not displaying on mobile, but works fine on desktop-CodePudding

I wrote a very basic JS function to create a clock. It uses a very basic replace method to change a "," to a "|" symbol. The desired output is "Thursday, Jan. 12, 2023 | 10:00:00 p.m."

const refreshTime = () => {
  let t = 0;

  const timeNow = (new Date).toLocaleString('en-CA', {
    timeZone: "America/Edmonton", year: "numeric", month: "short",
    weekday: "long", day: "numeric", hour12:true, hour: "numeric",  
    minute: "2-digit", second: "2-digit"
  }).replace(/,/g, match =>   t === 3 ? ' |' : match)

  const time = document.querySelector(".time")
  time.innerHTML = `${timeNow}`
}

refreshTime()
setInterval(refreshTime, 1000)

<h2 >""<h2>

As you can see here on the deployed site, this clock works fine in the header section. But once you click on that same link on a phone, it displays as "Thursday, Jan 12, 2023 at 10:00:00 p.m."

I've tried with multiple mobile browsers and also tried deploying on vercel and it is giving me the same result. How can I make sure this displays as intended on mobile?

CodePudding user response：

const date = new Date();
const dateString = date.toLocaleString('en-CA', {
    timeZone: "America/Edmonton", year: "numeric", month: "short",
    weekday: "long", day: "numeric"
});

const timeString = date.toLocaleString('en-CA', {
    hour: "numeric", minute: "2-digit", second: "2-digit"
});

const timeNow = `${dateString} | ${timeString}`

It is still possible some systems may present a different format, in which case you will need to manually create the format as described in: https://stackoverflow.com/a/14638191/5798435