纯JavaScript实现60字符标题长度限制器失效，求故障排查

我希望使用纯JavaScript为标题设置60字符的最大长度限制，但该功能无法正常运行。

HTML代码： #

<div class="limiter">
Pandemic deaths are spiraling 
out of control since the 
opening of the country 
and now we test the limiter
</div>

JavaScript代码： #

document.querySelector(".limiter").each(function () {
  var a = 60;
  var b = document.querySelector(this).text();
  if (b.length > a) {
    document.querySelector(this).text(b.substring(0, a + 1) + " ...");
  } else {
    document.querySelector(this).text(b);
  }
});

原因分析及修正 #

你的代码无法正常运行的核心问题是混用了jQuery语法和原生JavaScript，具体错误点如下：

• document.querySelector(".limiter")仅返回第一个匹配的DOM元素，且原生JS元素没有.each()方法——这是jQuery独有的遍历方法。要处理所有.limiter元素，需用document.querySelectorAll(".limiter")获取元素集合，再通过forEach循环遍历。
• 原生JS中没有.text()方法，获取或设置元素文本内容应该使用textContent属性。
• 循环内的document.querySelector(this)是错误用法：this在回调函数里已经指向当前的.limiter元素，直接使用this即可，无需重复查询DOM。
• 字符串截取逻辑有误：你设定的最大长度是60，但substring(0, a + 1)会取前61个字符，再加上"..."会超出长度限制，应该截取前60个字符后追加省略号。

修正后的代码： #

document.querySelectorAll(".limiter").forEach(function(el) {
  const maxLength = 60;
  // 先去除首尾空白（包括换行），避免干扰长度计算
  const originalText = el.textContent.trim();
  if (originalText.length > maxLength) {
    el.textContent = originalText.substring(0, maxLength) + " ...";
  }
});

内容的提问来源于stack exchange，提问作者Kamikaza