How to hide redundant french content in js?

Question

I am working on a fiddle which displays list of days and time (Timezone EST).

1 août 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
2 août 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
    ût 03:45 /* When timezone is eastern standard time */
    ût 05:00 /* When timezone is eastern standard time */

The above fiddle is working in a way that I am hiding the date when the value is the same as previous row meaning not displaying a day on a row where the date is the same as the previous row so that there are visual breaks by date.

Problem Statement:

The above fiddle is working perfectly fine. The only issue which I am having is when the month is french then its not hiding out some french characters or anything after that. In the above o/p, ût is still visible which should not be.

// we have to iterate backwards...
$($('.schedule-show').get().reverse()).each(function(i, div){
 let time = $(div).find('[data-timezone="et"]')
  let nextTime = $(div).find('+ .schedule-show [data-timezone="et"]')
  if(nextTime[0]){
   // check if they dates match
    if(nextTime.text().match(/\d+ \w+/)[0] === time.text().match(/\d+ \w+/)[0]){
      // "white out" the dates that match
     nextTime.html(nextTime.text().replace(/(\d+ \w+)/, "<font color=\"white\">$1</font>"))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schedule-wrapper" id="js-schedule" data-timezone="et">         /* The value of data-timezone attribute changes on button click from the Screenshot below */ 

   <!-- List of button start -->
   <div class="schedule-action-bar">
      <div class="schedule-timezone-filter">
         Select your timezone:            
         <ul id="js-timezone-picker">
            <li>
               <button id="js-time-et" class="" data-timezone="et">ET</button>
            </li>
         </ul>
      </div>
    </div>
    <!-- List of button end -->

    <div class="schedule-show">
        <div class="schedule-show-time">
             
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août  03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août  03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <!-- .schedule-show -->
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <!-- .schedule-show -->
    <div class="schedule-show">
        <div class="schedule-show-time">
              <time datetime="05:00 02-08-2019" data-timezone="et">2 août    05:00</time>            /* When timezone is eastern standard time */
        </div>
    </div>
   <!-- .schedule-show -->

</div>

To further elaborate, `` hasn't been in HTML since HTML4.01, from 1998. We removed it from the spec literally 20 years ago =) — Mike 'Pomax' Kamermans, Aug 01 '19 at 17:36
Having said that, the first candidate when regexp are involved is _always_ the regexp. What do you think `/\d+ \w+/` does on your French content? (e.g. what do you think `\w` does, and why would that be good enough for your needs?) — Mike 'Pomax' Kamermans, Aug 01 '19 at 17:37
you should use CSS, not "a tag". Write some classes that define your font/colors/etc and then add them to the element that needs to use them. — Mike 'Pomax' Kamermans, Aug 01 '19 at 17:40
In your regular expression, `\w` doesn't match characters with diacritics. See this question: https://stackoverflow.com/questions/20690499/concrete-javascript-regex-for-accented-characters-diacritics — Wyck, Aug 01 '19 at 17:40

score 1 · Answer 1 · answered Aug 01 '19 at 17:44

In your regular expression, \w doesn't match characters with accents (diacritics). See Concrete Javascript Regex for Accented Characters (Diacritics)

You can replace your regular expression \w with [A-Za-zÀ-ÖØ-öø-ÿ]

// we have to iterate backwards...
$($('.schedule-show').get().reverse()).each(function(i, div){
 let time = $(div).find('[data-timezone="et"]')
  let nextTime = $(div).find('+ .schedule-show [data-timezone="et"]')
  if(nextTime[0]){
   // check if they dates match
    if(nextTime.text().match(/\d+ \w+/)[0] === time.text().match(/\d+ \w+/)[0]){
      // "white out" the dates that match
     nextTime.html(nextTime.text().replace(/(\d+ [A-Za-zÀ-ÖØ-öø-ÿ]+)/, "<font color=\"white\">$1</font>"))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="schedule-wrapper" id="js-schedule" data-timezone="et">         /* The value of data-timezone attribute changes on button click from the Screenshot below */ 

   <!-- List of button start -->
   <div class="schedule-action-bar">
      <div class="schedule-timezone-filter">
         Select your timezone:            
         <ul id="js-timezone-picker">
            <li>
               <button id="js-time-et" class="" data-timezone="et">ET</button>
            </li>
         </ul>
      </div>
    </div>
    <!-- List of button end -->

    <div class="schedule-show">
        <div class="schedule-show-time">
             
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août  03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août  03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 01-08-2019" data-timezone="et">1 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <!-- .schedule-show -->
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <div class="schedule-show">
        <div class="schedule-show-time">
               <time datetime="03:45 02-08-2019" data-timezone="et">2 août    03:45</time>           /* When timezone is eastern standard time */
        </div>
    </div>
    <!-- .schedule-show -->
    <div class="schedule-show">
        <div class="schedule-show-time">
              <time datetime="05:00 02-08-2019" data-timezone="et">2 août    05:00</time>            /* When timezone is eastern standard time */
        </div>
    </div>
   <!-- .schedule-show -->

</div>

Looks good. Thanks for the help. I think this problem is coming because of special characters in french. I am wondering if its gonna work for these months as well `février` `décembre` ? — flash, Aug 01 '19 at 17:50
Yes, if you modify the regular expression as I showed, you should be good with the other french month names. The problem was that `\d+ \w+` was matching only `2 ao` and ending before the `û` in `août`. Try it online https://regex101.com/r/VzxtYW/2/ — Wyck, Aug 01 '19 at 18:11

score 0 · Answer 2 · answered Aug 01 '19 at 17:42

The problem looks like to be in the regexp \w not matching accentuated letters.

You could either:

simply, first unaccentuate Date and time before check regexp, see for example Remove accents/diacritics in a string in JavaScript
or, make the regexp compatible with accents, diacritics. See Concrete Javascript Regex for Accented Characters (Diacritics), or What's a good regex to include accented characters in a simple way?, or any equivalent

How to hide redundant french content in js?

2 Answers2