Show more/less without stripping Html tags in JavaScript/jQuery
<p>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 :</p>

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

<p>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:
<code>"Hello &lt;a href='#'&gt;test&lt;/a&gt; output"</code>, the html tags are coming 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 <code>"Hello &lt;a href='#'&gt;test&lt;/a&gt;"</code> . How can I do this</p>
