Question 326024 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to write Textlimit Function with keeping the structure of the HTML

jQuery(function($) {
  $(document).ready(function() {
    var moreLink = 'Read more';
    var lessLink = 'Read less';

    // Save the original content
    $('.container').each(function() {
      var originalContent = $(this).html();
      $(this).data('original-content', originalContent);
    });

    $('.container p').each(function() {
      var container = $(this).parent();
      var wordLimit = parseInt(container.closest(".container").attr('data-word-limit'));
      var paragraphs = container.find('p');
      var combinedText = '';
      paragraphs.each(function() {
        combinedText += $(this).text().trim() + ' '; // Combine paragraph texts
      });

      var words = combinedText.split(' ');
      if (words.length > wordLimit) {
        var truncatedText = words.slice(0, wordLimit).join(' ');
        var remainingText = words.slice(wordLimit).join(' ');

        var fullContent = '<p>' + truncatedText + '<span class="points">... </span>' + ' <span class="morecontent"><span>' + remainingText + ' </span><a href="" class="morelink">' + moreLink + '</a></span></p>';
        $(this).parent().html(fullContent);
      }
    });

    // Use event delegation to handle click events for dynamically added elements
    $(document).on('click', '.morelink', function() {
      var widget = $(this).closest('.container');
      var originalContent = widget.data('original-content');
      widget.html(originalContent);
      widget.find('p:last').append('<a href="" class="lesslink">' + 'Weniger lesen' + '</a>');
      return false;
    });

    $(document).on('click', '.lesslink', function() {
      $(this).closest('p').each(function() {
        var container = $(this).parent();
        var wordLimit = parseInt(container.closest(".container").attr('data-word-limit'));
        var paragraphs = container.find('p');
        var combinedText = '';

        paragraphs.each(function() {
          combinedText += $(this).text().trim() + ' '; // Combine paragraph texts
        });

        var words = combinedText.split(' ');
        if (words.length > wordLimit) {
          var truncatedText = words.slice(0, wordLimit).join(' ');
          var remainingText = words.slice(wordLimit).join(' ');

          var fullContent = '<p>' + truncatedText + '<span class="points">... </span>' + ' <span class="morecontent"><span>' + remainingText + ' </span><a href="" class="morelink">' + moreLink + '</a></span></p>';
          $(this).parent().html(fullContent);
        }
      });
      return false;
    });

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container" data-word-limit="90">
  <div class="paragrapgs">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam <strong>nonumy eirmod tempor</strong> invidunt ut labore et dolore magna...</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...</p>
  </div>
</div>

This JS code truncates the Text depending on the "data-word-limit" of the Container, and creates a read more button to toggle the text.
So I need to keep the HTML structure for an example: <strong> Tag. but when the Text is truncated it loses the structure.

Thank you

I have tried to split the text without losing the structure but it did not work

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I Have found the Answer my self, in Jquery instead of .text() split I schould make it .html() split as fowllowing:

    jQuery(function($) {
    $(document).ready(function() {
        var moreLink = 'Mehr lesen';
        var lessLink = 'Weniger lesen';

        // Save the original content
        $('.elementor-widget-text-editor').each(function() {
            var originalContent = $(this).html();
            $(this).data('original-content', originalContent);
        });

        $('.elementor-widget-text-editor p').each(function() {
            var container = $(this).parent();
            var wordLimit = parseInt(container.closest(".elementor-widget-text-editor").attr('data-word-limit'));
            var paragraphs = container.find('p');
            var combinedText = '';
            paragraphs.each(function() {
                combinedText += $(this).html().trim() + ' '; // Combine paragraph texts
            });

            var words = combinedText.split(' ');
            if (words.length > wordLimit) {
                var truncatedText = words.slice(0, wordLimit).join(' ');
                var remainingText = words.slice(wordLimit).join(' ');

                var fullContent = '<p>' + truncatedText + '<span class="points">... </span>' + ' <span class="morecontent"><span>' + remainingText + ' </span><a href="" class="morelink">' + moreLink + '</a></span></p>';
                $(this).parent().html(fullContent);
            }
        });

        // Use event delegation to handle click events for dynamically added elements
        $(document).on('click', '.morelink', function() {
            var widget = $(this).closest('.elementor-widget-text-editor');
            var originalContent = widget.data('original-content');
            widget.html(originalContent);
                      widget.find('p:last').append('<a href="" class="lesslink">' + 'Weniger lesen' + '</a>');
                    return false;
                });
            
             $(document).on('click', '.lesslink', function() {
             $(this).closest('p').each(function() {
            var container = $(this).parent();
            var wordLimit = parseInt(container.closest(".elementor-widget-text-editor").attr('data-word-limit'));
            var paragraphs = container.find('p');
            var combinedText = '';
                             
            paragraphs.each(function() {
                combinedText += $(this).html().trim() + ' '; // Combine paragraph texts
            });

            var words = combinedText.split(' ');
            if (words.length > wordLimit) {
                var truncatedText = words.slice(0, wordLimit).join(' ');
                var remainingText = words.slice(wordLimit).join(' ');

                var fullContent = '<p>' + truncatedText + '<span class="points">... </span>' + ' <span class="morecontent"><span>' + remainingText + ' </span><a href="" class="morelink">' + moreLink + '</a></span></p>';
                $(this).parent().html(fullContent);
            }
        });
                 return false;
                });
            
    });
});


  2. 0

    It may not be exactly what you’re looking for, but you can actually do something like this without any JavaScript whatsoever:

    details > summary {
    list-style: none;
}

details[open] .ellipsis {
    display: none;
}

details[open] summary {
    display: inline;
}
    <details>
    <summary>Cluck honk bwak<span class="ellipsis">...</span></summary>
    bok cluck-cluck-cluck bwok...
    Cluck cluck-a-buh-gawk bok pukaaak
    cluckity bwwwaaaaaaaaaak? Waaak bwok
    bwak cluck cluck-a-buh-gawk gobble-gobble?
    Bok cluck-cluck-cluck waaak bwak pukaaak
    cluck-a-buh-gawk cluckity bwok!
    <small>(<a href="https://codeberg.org/h3xx/perl-Chicken-Ipsum">Generated with Chicken::Ipsum</a>)</small>
</details>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search