JavaScript实现textarea单词计数器首字符触发计数的问题

原代码的计数逻辑是统计单词末尾的分隔符，只有输入空格/换行、单词结束时才会累加，因此未输入分隔符的首个单词不会被统计。改成统计单词起始位置即可，输入第一个有效字符时就会触发计数，同时兼容空格、换行两种分隔场景。

核心计数代码 #

全程使用基础循环和字符判断，不需要额外掌握新语法：

let wc = 0;
for (let i = 0; i < text.length; i++) {
  // 仅当当前字符是有效内容（非空格、非换行）时，才判断是否为新单词
  if (text[i] !== ' ' && text[i] !== '\n') {
    // 满足两个条件之一即为新单词：1. 是文本第一个字符；2. 前一个字符是分隔符
    if (i === 0 || text[i - 1] === ' ' || text[i - 1] === '\n') {
      wc++;
    }
  }
}

场景适配说明 #

• 输入第一个字母时：i=0 满足首字符规则，计数立刻变为1
• 换行分隔单词时：新行首个字符的前一位是\n，自动完成累加
• 存在连续空格、开头/末尾留空：不会重复计数
• 最后一个单词后不输入空格/换行：单词开头时已经完成计数，不会漏算

实时触发完整示例 #

将计数逻辑绑定到textarea的input事件上，即可实现输入即更新，同时通过原生属性限制140字符上限：

<textarea maxlength="140" id="text-area"></textarea>
<p>单词总数：<span id="word-count">0</span></p>

<script>
  const textarea = document.getElementById('text-area');
  const countLabel = document.getElementById('word-count');

  function calculateWordCount(text) {
    let wc = 0;
    for (let i = 0; i < text.length; i++) {
      if (text[i] !== ' ' && text[i] !== '\n') {
        if (i === 0 || text[i - 1] === ' ' || text[i - 1] === '\n') {
          wc++;
        }
      }
    }
    return wc;
  }

  // 每次输入自动重新计算
  textarea.addEventListener('input', () => {
    countLabel.textContent = calculateWordCount(textarea.value);
  });
</script>

关于split方法的补充 #

你之前使用split(" ")无法适配换行，是因为仅把空格设为了分隔符。如果后续接受数组相关写法，可以先把换行统一替换为空格再切割，过滤空值后取长度即可：

// 可选简化写法：先替换全量换行，再按空格切割，过滤连续空格产生的空项
const wc = text.replace(/\n/g, ' ').split(' ').filter(item => item).length;

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