After a certain number of words - give the rest blur, how to implement?

Question

css

Hello.
There is html markup:

<div class="row">
  <div class="col-sm-8">
    <h1 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
  </div>
</div>

<div class="row">
  <div class="col-md-8 col-sm-7">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>

      <h2>Title</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>

      <h2>Title</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sunt, quisquam voluptate accusantium quam expedita praesentium dolorum molestiae, iure repellendus ea maxime excepturi nisi laborum debitis. Aut quas quam, aperiam.</p>

      <div class="share-wrap row">
        <div class="row">
          <div class="col-md-6 text-right">
            <p>Lorem ipsum dolor sit amet</p>
          </div>

          <div class="col-md-6">
            <ul class="share">
              <li class="fb"><a href="#"></a></li>
              <li class="tw"><a href="#"></a></li>
              <li class="gpl"><a href="#"></a></li>
              <li class="pint"><a href="#"></a></li>
              <li class="ln"><a href="#"></a></li>
            </ul>
          </div>
        </div>
      </div>

      <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis animi recusandae atque temporibus dignissimos possimus reiciendis excepturi optio, cum dolores error earum vitae dolor fuga quam, corrupti quibusdam ab pariatur?
        <p></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione nihil fugiat repellat, accusantium voluptatum officiis deleniti adipisci, quo voluptates id ad quia molestias eum nulla magnam repellendus at commodi quaerat? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas amet ad accusantium non praesentium eligendi distinctio magnam saepe, esse laboriosam molestiae beatae laudantium, sapiente soluta alias repudiandae ipsum, corporis velit?</p>
      </div>
    </div>
  </div>
</div>

It is necessary, starting from h1, to count 100 words, and give the rest blur.
Can you please tell me how to implement correctly in js?
Thanks in advance.

Answer 1

$('h1').each(function(i,el){ //обрабатываем все h1
var t = el.text(); //взяли текст
var f = t.substring(0,100); //взяли первые 100 символов
var l = t.substring(100); //взяли все после 100
el.html(f+'<span class="blur">'+l+'</span>'); //обрамили все после 100 в спан с классом
});

And then do whatever you want with the blur class, at least blur it, hide it, even tint it to dark green.