如何仅替换日历星期缩写为全称，保留日期部分？

原始DOM结构（星期为缩写形式）：

<div class="dayClass">sat, 14 may</div>
<div class="dayClass">sun, 15 may</div>
<div class="dayClass">mon, 16 may</div>

期望修改后的DOM结构（星期为全称，保留日期）：

<div class="dayClass">Saturday, 14 may</div>
<div class="dayClass">Sunday, 15 may</div>
<div class="dayClass">Monday, 16 may</div>

用户编写的错误代码：

window.onload = function findAndReplaceDayName(){
  var elements = document.querySelectorAll('.dayClass');
for ( var i=elements.length; i--; ) {
  var text = elements[i].innerText;
   if(text.slice(0,3) == 'sat' ){
    elements[i].textContent = "Saturday"
  }else if(text.slice(0,3) == 'sun'){
elements[i].textContent = "Sunday";
    }else if(text.slice(0,3) == 'mon'){
elements[i].textContent = "Monday";
}}

错误运行结果（日期部分丢失）：

<div class="dayClass">Saturday</div>
<div class="dayClass">Sunday</div>
<div class="dayClass">Monday</div>

解决方案 #

问题根源是代码直接用星期全称覆盖了整个元素的文本内容，没有保留后面的日期部分。可以通过以下两种方式修复：

方法1：字符串替换（简洁直观） #

利用字符串的replace方法，只替换开头的星期缩写，保留剩余内容：

window.onload = function findAndReplaceDayName() {
  var elements = document.querySelectorAll('.dayClass');
  for (var i = elements.length; i--; ) {
    var text = elements[i].innerText;
    // 替换对应的缩写为全称，保留后面的日期
    text = text.replace('sat,', 'Saturday,')
               .replace('sun,', 'Sunday,')
               .replace('mon,', 'Monday,');
    elements[i].textContent = text;
  }
};

方法2：使用映射表（可扩展性更强） #

如果后续需要支持更多星期缩写，用对象映射表更方便，避免写多个if-else：

window.onload = function findAndReplaceDayName() {
  // 建立缩写到全称的映射表
  const dayMap = {
    'sat': 'Saturday',
    'sun': 'Sunday',
    'mon': 'Monday',
    // 可继续添加其他星期，比如'tue':'Tuesday'等
  };
  
  var elements = document.querySelectorAll('.dayClass');
  for (var i = elements.length; i--; ) {
    var text = elements[i].innerText;
    // 拆分文本为星期缩写和日期部分
    const parts = text.split(', ');
    if (parts.length === 2 && dayMap[parts[0]]) {
      // 替换缩写为全称，再拼接日期
      elements[i].textContent = `${dayMap[parts[0]]}, ${parts[1]}`;
    }
  }
};

两种方法都能实现仅替换星期缩写、保留日期的需求，第二种方法更适合后续扩展更多星期类型的场景。

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