После определенного количества слов — давать остальным blur, как реализовать?

Question

[Евгений]

Здравствуйте.
Есть html-разметка:

<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>

Нужно, начиная с h1, отсчитать 100 слов, а остальным дать blur.
Подскажите, пожалуйста, как правильно реализовать на js?

Заранее спасибо.

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 в спан с классом
});

А далее с классом blur делайте что угодно, хоть размывайте, хоть скрывайте, хоть тонируйте в темно зеленый.