Berechnung der geschätzten Lesezeit für Blogartikel: Ein Tutorial

Czytanie artykułów na głos

12/23/2023 | Web Development | Szacowany czas odczytu : min.

Wenn du deinen Lesern eine zusätzliche Orientierung bieten möchtest und ihnen zeigen willst, wie viel Zeit sie in etwa für das Lesen deines Beitrags einplanen sollten, ist die Angabe einer geschätzten Lesezeit ein praktisches Feature. In diesem Blogartikel zeige ich dir, wie du mit einem simplen Stück JavaScript diesen Mehrwert auf deiner Website schaffen kannst, unabhängig davon, welches Content Management System oder welche Technologie du verwendest.

What the JavaScript code does

This code calculates the estimated reading time based on the number of words in a text. We assume that an average reader reads around 200 words per minute. You can adjust this value to the reading habits of your target group if necessary.

Essentially, the code consists of two parts:

The calculation function (calculateReadingTime): This function takes a text string, counts the words and divides this number by the average reading speed. The result is rounded up to the nearest whole number to obtain the minutes of reading time.
The update function (updateReadingTime): Here, the actual text is retrieved from an element with the .news-text-wrap class. After the reading time has been calculated, it is displayed in an element with the class .estimated-reading-time_inner.

Integration of the code

To use this feature, you must follow these steps:

1. integrate JavaScript code

Insert the provided JavaScript code into a JavaScript file or integrate it directly into a <script> tag within your HTML document:

<script>
// Here is the JavaScript for calculating and displaying the reading time
</script>

2. Prepare HTML elements

Your article HTML should contain at least two elements: One for the text content and one in which the reading time is displayed. For example:

<div class="estimated-reading-time">
  Estimated reading time: <span class="estimated-reading-time_inner"></span> minutes
</div>
<div class="news-text-wrap">
  <!-- Here is the text of the article -->
</div>

3. Call up JavaScript code

Make sure that the updateReadingTime function is called as soon as the text content has been loaded. If you insert the code directly into the HTML document, this is done automatically at the end of the script.

Make adjustments

Adjusted reading speed: If you know that your readers read faster or slower, you can change the wordsPerMinute value accordingly.
Responsive display: Make sure that the reading time display also looks and works well on mobile devices.

Conclusion

Indicating an estimated reading time on your page is a simple but effective way to provide readers with an additional service and exude professionalism at the same time. This little JavaScript snippet can be used anywhere, regardless of the platform used.

The JavaScript code

document.addEventListener('DOMContentLoaded', function() {
  // Estimated reading time for blog articles
  // Calculates the estimated reading time based on the number of words
  function calculateReadingTime(text) {
    const wordsPerMinute = 200; // Average reading speed
    const words = text.trim().split(/\s+/).length; // Count the words
    const readingTime = Math.ceil(words / wordsPerMinute);
    return readingTime;
  }
  // Updates the display of the estimated reading time
  function updateReadingTime() {
    const newsTextWrap = document.querySelector('.news-text-wrap');
    // Checks if the element exists
    if (newsTextWrap) {
      const textContent = newsTextWrap.innerText;
      const readingTime = calculateReadingTime(textContent);
      const readingTimeDisplay = document.querySelector('.estimated-reading-time_inner');
      // Only updates if the target element exists
      if (readingTimeDisplay) {
        readingTimeDisplay.innerText = `${readingTime}`;
      }
    }
  }
  updateReadingTime();
});

Back

Kto tu pisze?

Cześć, jestem Wolfgang.

Od 2006 roku zagłębiam się w fascynujący świat TYPO3 - to nie tylko mój zawód, ale także moja pasja. Moja ścieżka prowadziła mnie przez niezliczone projekty i stworzyłem setki profesjonalnych samouczków wideo skupiających się na TYPO3 i jego rozszerzeniach. Uwielbiam rozwikływać złożone tematy i przekształcać je w łatwe do zrozumienia koncepcje, co znajduje również odzwierciedlenie w moich szkoleniach i seminariach.

Jako aktywny członek Komitetu Edukacyjnego TYPO3, jestem zaangażowany w utrzymywanie aktualnych i wymagających pytań egzaminacyjnych TYPO3 CMS Certified Integrator. Od stycznia 2024 roku mam zaszczyt być oficjalnym Partnerem Konsultacyjnym TYPO3!

Ale moja pasja nie kończy się na ekranie. Kiedy nie nurkuję w głębinach TYPO3, często można mnie spotkać na rowerze, eksplorującego malownicze szlaki wokół Jeziora Bodeńskiego. Te wycieczki na świeżym powietrzu są dla mnie idealną równowagą - utrzymują mój umysł w świeżości i zawsze dostarczają mi nowych pomysłów.

Der TYPO3 Newsletter

TYPO3-Insights direkt in dein Postfach!
Hol dir monatliche Updates, praktische Tipps und spannende Fallstudien.
Übersichtlich, zeitsparend, ohne Spam.
Bist du dabei? Jetzt für den Newsletter anmelden!