javascript - 如何在js中隐藏多余的法语内容？

Question

我正在制作一个显示日期和时间列表（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 */

上面的小提琴的工作方式是当值与前一行相同时隐藏日期，这意味着不在日期与前一行相同的行上显示日期，以便按日期显示视觉中断。

问题陈述：

上面的小提琴工作得很好。我遇到的唯一问题是当月份是法语时，它不会隐藏一些法语字符或之后的任何内容。在上面的 o/p 中，ût 仍然可见，但不应该。

// 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>

Answer 1

在您的正则表达式中，\w不匹配带有重音符号（变音符号）的字符。请参阅重音字符的具体 Javascript 正则表达式（变音符号）

您可以将正则表达式替换\w为[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>

Answer 2

问题似乎在于正则表达式\w与重音字母不匹配。

您可以：

• 简单地说，在检查正则表达式之前首先取消重音日期和时间，例如在 JavaScript 中删除字符串中的重音符号/变音符号
• 或者，使正则表达式与重音、变音符号兼容。请参阅Concrete Javascript Regex for Accented Characters (Diacritics)，或What's a good regex to include the 重音字符以简单的方式？, 或任何等价物