Как добавить интервал вокруг первого числа слов в элементе? - PullRequest
Новая
       51

Как добавить интервал вокруг первого числа слов в элементе?

0 голосов
/ 05 сентября 2018

Мне нужно стилизовать первые 10 слов абзаца другим цветом (содержимое динамическое, поэтому я не могу просто вставить интервал в HTML). Мое решение состоит в том, чтобы использовать JavaScript и сделать это будет все экземпляры .overview__text. Я могу получить предупреждение о словах, но в моем HTML это не показывает промежуток. Можете ли вы объяснить, как я 5, что я делаю не так? И это лучшее решение?

HTML 

<div class="overview__text">
    <p>
    Lorem ipsum dolor sit amet, no quem ipsum adipisci cum, zril 
    molestiae 
    mius no, ludus omittantur ullamcorper et mel. Fabulas probatus 
    consectetuer quo cu, an patrioque assentior pro. Sint omittantur ad 
    eam, sale apeirian
    </p>
</div>

JAVASCRIPT 

const overviewText = $('.overview__text p');

overviewText.each(function () {
    const text = $(this).text().split(' ');
    const overviewTextLead = text.slice(0, 10);
    alert(overviewTextLead);
    if (text.length > 20) {
        overviewText.innerHTML = `<span class="highlighted"> ${overviewTextLead.join(' ')}</span> ${overviewText.slice(10)}`;
    }
});

1 Ответ

0 голосов
/ 05 сентября 2018

Проблема в том, что overviewText является коллекцией jQuery, а не HTMLElement - вы не можете установить ее innerHTML. Вместо этого вызовите метод html() для него.

Кроме того, после интервала, чтобы получить остальную часть текста, вызовите .slice(10) вместо (оригинала) text: 

const overviewText = $('.overview__text p');

overviewText.each(function() {
  const text = $(this).text().split(' ');
  const overviewTextLead = text.slice(0, 10);
  alert(overviewTextLead);
  if (text.length > 20) {
    overviewText.html(`<span class="highlighted"> ${overviewTextLead.join(' ')}</span> ${text.slice(10).join(' ')}`);
  }
});
.highlighted {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overview__text">
    <p>
    Lorem ipsum dolor sit amet, no quem ipsum adipisci cum, zril 
    molestiae 
    mius no, ludus omittantur ullamcorper et mel. Fabulas probatus 
    consectetuer quo cu, an patrioque assentior pro. Sint omittantur ad 
    eam, sale apeirian
    </p>
</div>

Но это намного сложнее, чем нужно - вы можете достичь того же самого без jQuery, используя регулярное выражение и .replace: 

const p = document.querySelector('.overview__text p');
p.innerHTML = p.textContent.replace(
  /^(\s+[\w,]+){10}/,
  `<span class="highlighted">$&</span>`
);
.highlighted {
  background-color: yellow;
}
<div class="overview__text">
    <p>
    Lorem ipsum dolor sit amet, no quem ipsum adipisci cum, zril 
    molestiae 
    mius no, ludus omittantur ullamcorper et mel. Fabulas probatus 
    consectetuer quo cu, an patrioque assentior pro. Sint omittantur ad 
    eam, sale apeirian
    </p>
</div>
...