正则.replace()方法移动端显示异常，桌面端正常的解决咨询

你当前的时钟依赖toLocaleString('en-CA')的输出，通过计数逗号来插入|，但移动端浏览器输出格式为Thursday, Jan 12, 2023 at 10:00:00 p.m.，和桌面端结构差异明显，导致替换逻辑失效，同时月份缩写缺少点号，不符合预期格式。

问题根源在于toLocaleString的输出格式并非所有浏览器/设备都完全统一，不同环境的本地化实现存在差异，不能依赖计数逗号这类不稳定的方式做格式调整。以下是可靠的解决方法：

方案一：拆分日期与时间生成逻辑，手动拼接格式 #

这种方式完全控制输出结构，跨端一致性最高：

const refreshTime = () => {
  const now = new Date();
  // 单独配置日期格式化规则
  const dateFormatter = new Intl.DateTimeFormat('en-CA', {
    timeZone: "America/Edmonton",
    year: "numeric",
    month: "short",
    weekday: "long",
    day: "numeric"
  });
  // 单独配置时间格式化规则
  const timeFormatter = new Intl.DateTimeFormat('en-CA', {
    timeZone: "America/Edmonton",
    hour12: true,
    hour: "numeric",
    minute: "2-digit",
    second: "2-digit"
  });

  // 格式化日期并补全月份缩写的点号
  let dateStr = dateFormatter.format(now);
  dateStr = dateStr.replace(/(\w{3})(?= \d)/, '$1.');

  // 格式化时间并移除可能存在的"at "前缀
  let timeStr = timeFormatter.format(now);
  timeStr = timeStr.replace(/^at /, '');

  // 拼接成预期格式
  const timeNow = `${dateStr} | ${timeStr}`;

  const time = document.querySelector(".time");
  time.textContent = timeNow; // 用textContent比innerHTML更安全高效
};

refreshTime();
setInterval(refreshTime, 1000);

方案二：手动获取各时间字段，完全自定义组装 #

如果需要更精细的格式控制，可以直接提取每个时间字段来构建字符串：

const refreshTime = () => {
  const now = new Date();
  const baseOptions = { timeZone: "America/Edmonton" };
  
  // 获取日期相关字段
  const weekday = new Intl.DateTimeFormat('en-CA', { ...baseOptions, weekday: "long" }).format(now);
  const month = new Intl.DateTimeFormat('en-CA', { ...baseOptions, month: "short" }).format(now);
  const day = new Intl.DateTimeFormat('en-CA', { ...baseOptions, day: "numeric" }).format(now);
  const year = new Intl.DateTimeFormat('en-CA', { ...baseOptions, year: "numeric" }).format(now);
  
  // 处理时间相关字段，确保12小时制格式正确
  const hour24 = parseInt(now.toLocaleString('en-CA', { ...baseOptions, hour: "numeric", hour12: false }), 10);
  const period = hour24 >= 12 ? 'p.m.' : 'a.m.';
  const hour12 = (hour24 % 12 || 12).toString();
  const minute = now.toLocaleString('en-CA', { ...baseOptions, minute: "2-digit" }).format(now);
  const second = now.toLocaleString('en-CA', { ...baseOptions, second: "2-digit" }).format(now);

  // 组装成预期格式，强制给月份缩写加.
  const timeNow = `${weekday}, ${month}. ${day}, ${year} | ${hour12}:${minute}:${second} ${period}`;

  const time = document.querySelector(".time");
  time.textContent = timeNow;
};

refreshTime();
setInterval(refreshTime, 1000);

额外修复点 #

你的原HTML标签存在错误，<h2 class="time">""<h2>应修改为<h2 class="time"></h2>，错误的闭合标签可能导致移动端渲染异常。

内容的提问来源于stack exchange，提问作者user19703227