Read more/less without stripping Html tags in JavaScript

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 coming between and it will mess up the page if strip it partially. What I want开发者_StackOverflow社区 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

---

Why not just hide the hidden part of the content instead of adding it later? I usually just use a display: none for hidden content and have it set to display: block when the read more is clicked..

---

Edit: I'm sorry I didn't read the question good enough. This should work though:

<div id="test">
This <a href="http://www.google.com">links to google</a> 
<strong>and</strong> some random text to make it a little bit longer!
</div>

<script type="text/javascript"> 
$(document).ready(function() {
   var max_length = 21;
   var text_to_display = "";
   var index = 0;
   var full_contents = $("#test").contents();

   // loop through contents, stop after maxlength is reached
   $("#test").contents().each(function(i) {
        if ($(this).text().length + text_to_display.length < max_length) {
            text_to_display += $(this).text();
            index++;
        } else {
            return false;
        }
    });

   // second loop removes unwanted content
   $("#test").contents().each(function(i) {
        if (i > index) {
            $(this).remove();
        }
        return true;
   });

   // add link to show the full text
   $('<a href="#">read more...</a>').click(
    function(){
        $("#test").html($(full_contents));
        $(this).hide(); 
    }).insertAfter($("#test"));
 });
</script> 

This can be accomplished quite easilly using jQuery

<div id="test">This <a href="http://www.google.com">is a link to google</a></div>

<script type="text/javascript"> 
$(document).ready(function() {
   alert($("#test").text());
 });
</script> 

Good luck!

---

You stated that the html tags would become an issue, so why not remove in the string conversion and replace with plain text, then on the Show More click, Toggle plain + Html

$(document).ready(function(){
    var Contents = $('#post p'); //Object

    var Plain = Contents.text(); //truncate this

    //Hide the texts to Contents
    Contents.hide();

    var PlainContainer = $("<div>").addClass("Plain_Container").val(Plain)

    //Add PlainContainer div after
    Contents.append(PlainContainer);


    var $('.show_hide').click(function(){
        $(Plain_Container).remove(); //Delete it

        Contents.Show(); //Show the orginal

        $(this).remove(); //Remove the link

        return false; //e.PreventDefault() :)
    });
});

This way using the text() function will convert html tags to there values and remove the tag itself, all you have to do is toggle them :)

Note: The code above is not guaranteed to work and is provided as example only.