I want to implement readmore/less feature. i.e I will be having html content and I am going to show first few characters from that content and there will be a read more link in front of it. I am currently using this code :

    var txtToHide= input.substring(length);
    var textToShow= input.substring(0, length);
    var html = textToShow+ '<span class="readmore">&nbsp;&hellip;&nbsp;</span>' 
+ ('<span class="readmore">' + txtToHide+ '</span>');
    html = html + '<a id="read-more" title="More" href="#">More</a>';

Above input is the input string and length is the length of string to be displayed initially. There is an issue with this code, suppose if I want to strip 20 characters from this string: "Hello <a href='#'>test</a> output", the html tags are ing between and it will mess up the page if strip it partially. What I want here is that if html tags are falling between the range it should cover the full tag i.e I need the output here to be "Hello <a href='#'>test</a>" . How can I do this

I want to implement readmore/less feature. i.e I will be having html content and I am going to show first few characters from that content and there will be a read more link in front of it. I am currently using this code :

    var txtToHide= input.substring(length);
    var textToShow= input.substring(0, length);
    var html = textToShow+ '<span class="readmore">&nbsp;&hellip;&nbsp;</span>' 
+ ('<span class="readmore">' + txtToHide+ '</span>');
    html = html + '<a id="read-more" title="More" href="#">More</a>';

Above input is the input string and length is the length of string to be displayed initially. There is an issue with this code, suppose if I want to strip 20 characters from this string: "Hello <a href='#'>test</a> output", the html tags are ing between and it will mess up the page if strip it partially. What I want here is that if html tags are falling between the range it should cover the full tag i.e I need the output here to be "Hello <a href='#'>test</a>" . How can I do this

• c#
• php
• javascript
• asp
• jquery

• I don't believe there is a simple way - you'll just need to write up an algorithm that will go through the text and make sure that it displays the start and end tag if it's caught in the middle. – xil3 Commented Jan 6, 2011 at 9:10

5 Answers 5

Instead of doing too much manually, I prefer you to go with following jQuery plugin.

http://plugins.learningjquery./expander/index.html#getting-started

It will expand and collapse your text for Read more options, Also provide you much customization.

Hope this will help.

Thanks!

Hussain

This will be quite hard since HTML is not a regular language, so using regular expressions would be cumbersome.

Really want you need to do is parse the HTML into a DOM structure using jQuery $('html text') and then recursively go through the elements getting the length of each elements text using .text() and when you e to an element with causes the cumulative text length thus far to be over the limit, split this elements text at that point and set it the element's text to be the left of the split.

Then keep all elements before this one, and disregard all siblings etc that occur after this element. However I have no idea how to implement that simply.

On the other hand you could just strip the HTML tags away, why bother.

If you have the text in a dom element, you could use the innerText/textContent property of the dom element to get just the text without the tags. substring of this text could be used without worrying about the tags.

var post_dom = document.getElementById('#post-content');
var input = post_dom.innerText || post_dom.textContent;

I think the best solution here would be to use

var textToHide = input;
var textToShow = $("<div/>").html(input).text().substring(0, length);

which will convert your HTML to plain text and extract the first few characters for the summary. Then toggle between them when they click the ellipsis rather than trying to display both at the same time.

maybe you could rethink the problem : instead of modifying your text, you could modify the way it is shown on the page.
Say if you want to show only 3 rows of the content, you could modify the content's container style to a height equal to the height of one content row * 3.

Anyway, this could be easily implemented in jquery ,and if you take advantage of it's animate function, you could easily make your own plugin such as :

(function($){  
   $.fn.lessDetails = function(desiredHeight){  
      var desiredHeight = desiredHeight || 20; //or any other "default" value
      return this.each(function(i){  
        $(this).realHeight = $(this).css("height");  
        $(this).css('height',desiredHeight);//or you could animate it
      });
   };  
  $.fn.moreDetails = function(){  
      return this.each(function(i){  
        $(this).css('height',$(this).realHeight || "auto");//or you could animate it
      });
   };   
})(jQuery);

and then you could call :
$('.less').lessDetails(); $('.showMore').click(function(){$('#'+$(this).attr('rel')).moreDetails();});'
having your html structured as :
< div class="container"> < div id="1" class="less">content goes here </div> < a href="#" rel="1" class="showMore"> show more</a> </ div >

Haven't tested it ,but it should work, or at least should give you a basic idea of my solution.