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