Question 168537 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Javascript replace the first character of a string in a loop?

On the page, the calendar columns are displayed with abbreviations, such as "sat" instead of "saturday".

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

to be like below

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

I wrote this code by searching
But I can’t just change the word "day" and the date will also be replaced

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";
}}

But the result is this

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

Can you help me to change only the day and not the date.
Thankful
Footnote: I am new to both programming and English language

Tags:

6

Answers


  1. 0

    I appreciate your English as well as coding though you are a beginner.

    There’s just a small change in your code that has to be made.
    Like this :

    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" + text.slice(3) // important
   }else if(text.slice(0,3) == 'sun'){
     elements[i].textContent = "Sunday" + text.slice(3) // important
   };
}}
    Login or Signup to reply.
  2. 0 
    window.onload = function findAndReplaceDayName() {
  var elements = document.querySelectorAll('.dayClass');
  for (var i = 0; i < elements.length; i++) {
    var text = elements[i].innerText;
    if (text.indexOf(',') !== -1) {
      var dayName = text.slice(0, text.indexOf(',')).trim();
      var date = text.slice(text.indexOf(',') + 1).trim();
      switch (dayName) {
        case 'sat':
          dayName = 'Saturday';
          break;
        case 'sun':
          dayName = 'Sunday';
          break;
        case 'mon':
          dayName = 'Monday';
          break;
        // add more cases for other days if needed
      }
      elements[i].textContent = dayName + ', ' + date;
    }
  }
};
    Login or Signup to reply.
  3. 0

    By writing elements[i].textContent = "Saturday" you are replacing all of the textContent by ‘Saturday’. That’s why you lost all of the text.

    You sould replace only the first characters. So, by writing
    elements[i].textContent = "Saturday"; elements[i].textContent += text.slice(3); you’ll replace all the text by Saturday then you’ll add the next part to keep it.

    Login or Signup to reply.
  4. 0

    There is no need for any complex for loop.
    Just use the build in forEach method.

    replace() method makes this happen effortlessly

    window.onload = function findAndReplaceDayName(){
  var elements = document.querySelectorAll('.dayClass');
  elements.forEach(e=>{
      var text = e.innerText;
      if(text.slice(0,3) == 'sat' ){
          e.textContent = e.textContent.replace('sat',"Saturday")
      }else if(text.slice(0,3) == 'sun'){
          e.textContent = e.textContent.replace('sun',"Sunday");
      }else if(text.slice(0,3) == 'mon'){
          e.textContent = e.textContent.replace('mon',"Monday");
      }
  });
}
    <div class="dayClass">sat, 14 may</div>
<div class="dayClass">sun, 15 may</div>
<div class="dayClass">mon, 16 may</div>
    Login or Signup to reply.
  5. 0

    As many other answers point out: you should replace a part of the string, keeping the rest intact.

    Personally I’d avoid hardcoding those numbers, and would attempt to get the first part of the string up to the comma instead. Also, for systematic replacement of a small set of things, an object or an actual Map may be a good choice. And if you succumb to the dark side, replace() can do the entire thing, as it can look for a regular expression, and then provide a replacement dynamically based on its findings:

    const mapping = {
  "sat": "Saturday",
  "sun": "Sunday",
  "mon": "Monday"
};

function clicky() {
  const elements = document.querySelectorAll('.dayClass');
  for (const element of elements)
    element.textContent = element.textContent.replace(/[^,]+/, day => mapping[day]);
}
    <div class="dayClass">sat, 14 may</div>
<div class="dayClass">sun, 15 may</div>
<div class="dayClass">mon, 16 may</div>
<button onclick="clicky()">ClickMe</button>

    Here the [^,]+ matches the non-comma characters from the start of the string, and then this match is going to be the day argument for the arrow function, which simply looks up the corresponding long-name from the mapping object defined at the beginning.

    Login or Signup to reply.
  6. 0

    Here is a simple method – I am assuming there is always a match in fullNames.

    const fullNames = { "sat":"Saturday","sun":"Sunday","mon":"Monday" };
window.addEventListener("DOMContentLoaded", () =>  {
  document.querySelectorAll('.dayClass').forEach(div => {
    const text = div.textContent.slice(0,4);
    if (!text.endsWith(",")) return;
    div.innerText = fullNames[text.slice(0,3)] + div.innerText.slice(3);
  });
});
    <div class="dayClass">sat, 14 may</div>
<div class="dayClass">sun, 15 may</div>
<div class="dayClass">sun is shining today</div>
<div class="dayClass">mon, 16 may</div>

    If there is no way dayClass can start with anything else but day abbreviations, the code is even simpler

    const fullNames = { "sat":"Saturday","sun":"Sunday","mon":"Monday" };
window.addEventListener("DOMContentLoaded", () =>  {
  document.querySelectorAll('.dayClass').forEach(div => {
    const text = div.textContent.slice(0,3);
    div.innerText = fullNames[text] + div.innerText.slice(3);
  });
});
    <div class="dayClass">sat, 14 may</div>
<div class="dayClass">sun, 15 may</div>
<div class="dayClass">sun is shining today</div>
<div class="dayClass">mon, 16 may</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search