separate elements with a comma in javascript

Question

Here is the input:

scheduleInput = { schedulefor: "weekdays" , weekdays: "" , days:""}

This is the TS file

onChangeCheckWeek(week:any ,  isChecked: boolean) {
  if (isChecked) {
    this.checkAll = false;
    this.scheduleInput.weekdays= this.scheduleInput.weekdays + week; 
    // The weekdays are stored in this.scheduleInput.weekdays and week is having the newly slected checkbox
    week.split(/[ ,]+/);
  } else {
    this.checkAll = false;
    this.selectAllWeekDays= false;
  }
}

This is the HTML:

<div class="Schedule container-fluid" *ngIf="scheduleInput.schedulefor == 'weekdays'">
  <div class="my-info-1 row weekday">
    <h4 class="mgtop-15">
      Weekly :
    </h4>
  </div>
  <div class="row">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0 warning">
      <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAll" (change)="onChangeCheckAll($event.target.checked)" [(ngModel)]="selectAllWeekDays">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span>
      Select All
    </label></div>
    <div class="row mgtop-5">
     <div class="col-sm-4 ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input"  [checked]="checkAllWeek" (change)="onChangeCheckWeek('Monday', $event.target.checked)"   [value]="Monday" >
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Monday
        </label>
      </div>
      <div class="col-sm-4">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Tuesday', $event.target.checked)" [value]="Tuesday"  >
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Tuesday
        </label>
      </div>
      <div class="col-sm-4  ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Wednesday', $event.target.checked)" [value]="Wednesday">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Wednesday
        </label>
      </div>
    </div>
    <div class="row mgtop-5">
      <div class="col-sm-4  ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Thursday', $event.target.checked)" [value]="Thursday">
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Thursday
        </label>
      </div>
      <div class="col-sm-4  ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
         <input type="checkbox" id="rem"  class="custom-control-input" [checked]="checkAllWeek" (change)="onChangeCheckWeek('Friday', $event.target.checked)" [value]="Friday" >
          <span class="custom-control-indicator"></span>
          <span class="custom-control-description"></span>
          Friday
        </label>
      </div>
      <div class="col-sm-4 ">
        <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
          <input type="checkbox" id="rem"  class="custom-control-input"  [checked]="checkAllWeek" (change)="onChangeCheckWeek('Saturday', $event.target.checked)"  [value]="Saturday">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description"></span>
            Saturday
          </label>
        </div>
      </div>
      <div class="row mgtop-5">
        <div class="col-sm-4 ">
          <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
            <input type="checkbox" id="rem"  class="custom-control-input"  [checked]="checkAllWeek" (change)="onChangeCheckWeek('Sunday' , $event.target.checked)"  [value]="Sunday">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description"></span>
            Sunday
          </label>
        </div>
      <div class="col-sm-8 mgtop-5"></div>
    </div>
  </div>

When I check the weekdays in the console after checking the checkboxes which is getting stored in week it is showing as;

MondayTuesdayWednesday....

I want it to be displayed as

Monday, Tuesday, Wednesday...

I also want it to be displayed in the same order even if Saturday is selected first and the other week days are selected after that. Your help would be highly appreciated.

Answer 1

You can use RegEx /[A-Z][a-z]+/g on your current result to split on uppercase letter like the following:

var days = 'MondayTuesdayWednesday'
days = days.match(/[A-Z][a-z]+/g).join(', ');
console.log(days);

Answer 2

This would do the trick:

var week="MondayTuesdayWednesdayThursdayFridaySaturdaySunday";
var str=week.match(/[A-Z]*[^A-Z]+/g).join(', ');
console.log(str);