如何计算文本区域中的字符数？

Question

我正在尝试为我的“textarea”标签实现一个字符计数器，但有些东西肯定不起作用。我尝试了几种方法，但没有成功。我知道网络上有很多实现，但我找不到适用于我的代码的东西。我是这个领域的初学者，我根本不明白这是如何工作的。 代码：

   ...............
    <div id='id_text' class="control-group">
           <label for="id_text" class="control-label">
                Text
           </label>
          <div class="controls">
              <label for="field"></label>
                 <textarea id="field" onkeydown="countChar(this)" maxlength="800"></textarea>
            </div>
          <span>Char Left:</span>  <span id="charNum"> </span>
   </div>
....................................

脚本：

<script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
      function countChar(val) {
        var len = val.value.length;
          $('#charNum').text(800 - len);
        }

    </script>

注意：该脚本位于 HTML 页面的底部（我尝试将其放在顶部，但没有成功）。 脚本很简单：我只想从文本区域中获取字符数，然后向用户显示剩余的字符。

我在这里寻找其他答案，我在其他网站上寻找答案，但我认为我的代码有问题，但我不明白。

注 2：文本区域是

<form>

的一部分。我正在使用 django 框架。

非常感谢您的帮助和关注！

编辑：

我已经尝试了 Rory 的代码，这就是我所看到的。

Answer 1

在 JavaScript 中计算文本区域中的字符有两种方法

1. 要计算单词之间空格的字符数，您只需获取 texarea 的内容，并测量“长度”。请记住：“String 原型对象有一个“length”属性，其初始值为 0”

//injecting "hello world" (10 characters and 1 space) into the DOM
let newDiv = document.createElement("div")
let newContent = document.createTextNode(`hello world`)
newDiv.setAttribute("id", "Div1")
newDiv.appendChild(newContent)
document.body.appendChild(newDiv)  
let str = document.getElementById("Div1").innerHTML
//counting the number of characters injected
alert(`LENGHT = ` + `${str.length}`); // HERE THE PROPERTY LENGTH ..

2. 这里计算字符数，单词之间没有空格“：

//injecting "hello world" (10 characters and 1 space) into the DOM
let newDiv = document.createElement("div")
let newContent = document.createTextNode(`hello world`)
newDiv.setAttribute("id", "Div1")
newDiv.appendChild(newContent)
document.body.appendChild(newDiv)  
let str = document.getElementById("Div1").innerHTML
//first you split the content using String.prototype.split ( separator, limit ) then concatenate the array obtained by the split without spaces using  : Array.prototype.join ( separator )
alert(str.split(' ').join('').length) 

更新： 关于性能，遵循 @jallmer 的想法，使用方法替换 + REGEX

//injecting "hello world" (10 characters and 1 space) into the DOM
let newDiv = document.createElement("div")
let newContent = document.createTextNode(`hello world`)
newDiv.setAttribute("id", "Div1")
newDiv.appendChild(newContent)
document.body.appendChild(newDiv)

//testing algorithms perfs
let str1 = document.getElementById("Div1").innerHTML
let str2= document.getElementById("Div1").innerHTML

//testing algorithm 1
console.log(`str1 = ${str1}`)
const t0 = performance.now();
console.log(str1.split(' ').join('').length)
const t1 = performance.now()
console.log(`algorithm 1 took ${t1 - t0} milliseconds.`);

//testing method 2
console.log(`str2 = ${str2}`)
const t2 = performance.now();
console.log(str2.replace(/\s/g, '').length)
const t3 = performance.now()
console.log(`algorithm 2 took ${t3 - t2} milliseconds.`);

奇怪的是，我的 Chrome 开发工具（Chrome for Gnu/Linux，版本 90.0.4430.93（官方版本）（64 位））上的结果有所不同。要检查的东西：

Answer 2

keydown

事件在字段中的值更新之前触发。因此，您的 JS 会显示 previous 按键的字符计算。 keyup

是两者中更好的选择。

但是，话虽这么说，您应该使用

input

 事件，因为它涵盖了字段值发生变化而 

keydown

/

keyup

 不会发生变化的所有情况 - 例如使用鼠标复制和粘贴。

另请注意，jQuery 1.5 已经严重过时了——事实上已经有 10 多年的历史了。您应该使用最新版本，在回答时是 3.6。此外，使用

onX

 事件属性不再是好的做法。尝试以不显眼的方式附加事件处理程序，而不在 HTML 中包含任何 JS。当您已经使用 jQuery 时，您可以使用 

on()

 方法来做到这一点

综上所述，试试这个：

jQuery($ => {
  const $charNum = $('#charNum');

  $('#field').on('input', e => {
    let len = e.target.value.length;
    $charNum.text(800 - len);
  }).trigger('input');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id='id_text' class="control-group">
  <label for="id_text" class="control-label">Text</label>
  <div class="controls">
    <label for="field"></label>
    <textarea id="field" maxlength="800"></textarea>
  </div>
  <span>Char Left:</span> <span id="charNum"> </span>
</div>

Answer 3

字符计数器是一种计算给定文本或字符串中字符数的工具或功能。它通常包含所有字符，包括字母、数字、标点符号、空格和特殊字符。字符计数器常用于各种任务应用程序中。您可以访问此链接

https://thistothat.online/character-counter