如何在元素的前x个单词周围添加跨度?

时间:2018-09-05 04:08:03

标签: javascript html split slice

我需要为段落的前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 :(得分:2)

问题在于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>

但这要复杂得多-使用正则表达式和.replace,您可以在没有jQuery的情况下实现相同的目的:

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>