javascript - 使用 Javascript chop 所有字符串

Question

下面的代码旨在检查给定 html 元素的字符串长度。

<span class="subject">subject abcd</span>

如果字符串超过 130 个字符，它会 chop 它，然后在字符串末尾显示三个点。 如果我有十多个名为 .subject 的 span 元素怎么办，有没有办法制作一个“惰性”函数来检查所有这些元素并只 chop 那些长于 130 个字符的元素？

普通 Javascript 代码:

var res, nodeLength = document.querySelector(".subject").innerHTML;
if(nodeLength.length > 130){
    res = nodeLength.slice(0,130);
    document.querySelector(".subject").innerHTML = res + "...";
}

HTML代码:

<div class="item">
    <div class="article">
        <span class="subject">subject abcd</span>
        <span class="time">time</span>
        <span class="text">text</span>
    </div>
    <a href="#" class="more">more</a>
</div>

Answer 1

使用querySelectorAll选择所有主题跨度，然后遍历它们(在本例中，为了方便起见，我使用了 13 个字符限制而不是 130 个字符)。

另请注意，并非所有浏览器都采用 forEach 遍历节点列表，但如果遇到问题，您可以使用简单的 for 循环。

const subjects = document.querySelectorAll(".subject");

subjects.forEach(subject => {
  let text = subject.textContent;
  if (text.length > 13) {
    subject.textContent = `${text.slice(0, 13)}...`;
  }
});

<div class="item">
    <div class="article">
        <span class="subject">subjectdfdfgdfgdfgbd abcd</span>
        <span class="subject">subject abcddfg ddfg df</span>
        <span class="subject">subject abcd</span>
        <span class="subject">subject abcd</span>
        <span class="subject">subject asdgdsvbdrgsdgbbcd</span>
        <span class="time">time</span>
        <span class="text">text</span>
    </div>
    <a href="#" class="more">more</a>
</div>