Simple Post Excerpts Generator

Simple Post Excerpts Generator

by Adi Jaya

HTML

<textarea id="editor" rows="10">
<p>Lorem ipsum dolor sit amet</p>
       <p>consectetur <b>adipiscing</b> elit</p>
<ul>
    <li>Ut enim ad minim veniam</li>
    <li>Duis aute irure dolor</li>
    <li>Excepteur sint occaecat</li>
</ul>

<div>Duis aute irure dolor in reprehenderit in voluptate</div>

<blockquote>
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</blockquote>

<button id="test-button">button</button>
</textarea>

<p>
    <button>Generate</button>
</p>

<p class="snippet"></p>

<textarea readonly id="excerpts" rows="10"></textarea>

CSS

textarea {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

.snippet {
    padding: 1em;
    background-color: beige;
}

JavaScript

$( document ).on( "click", "button", function(){
  var value = $( "#editor" ).val();
  		value = value.replace( /(<([^>]+)>)/g, "" );
  		value = value.replace( /\s\s+/g, ' ' );
  
  //test output 1 = 100 character [div element]
  $( ".snippet" ).text( value.substring( 0, 100 ) + "…" );

  // test output 1 = 250 character [textarea element]
  $( "#excerpts" ).val( value.substring( 0, 250 ) );
  
});