Question

要计算在textarea中键入的字符，我有一个可以计算单词间空格的代码。但是我希望两种功能都喜欢在Simple JavaScript中使用带空格和不带空格的单词来计数。

由于我不是编程专家，所以无法尝试其他方法或框架。我更喜欢本机JavaScript代码。

当前的JavaScript代码用于计算带空格的字符：

 

    function countChars(obj){
    document.getElementById("charNum").innerHTML = obj.value.length+' 
    characters';

HTML


    <form name="post" method="POST"> 

<textarea name="new" charset="utf-8" onKeyDown="toggleKBMode(event)" value="copyThisContent" id="newInputID" onKeyPress="javascript:convertThis(event)" style="height:255px; Width:100%; margin-top: -17px; line-height: 15px;" placeholder="Write something.."" onkeyup="countChars(this);"></textarea>

<p id="charNum">0 characters</p>

 </form>

请帮助我修改以上代码，以计算带空格和不带空格的textarea中的字符。如果可能的话，我也希望字数统计功能。

我期望以下网站中已经存在的功能。 https://easywordcount.com或https://wordcounter.net/

Answer 1

使用正则表达式

 function countChars(obj){
    var valLength=obj.value.replace(/\s/g,'').length;
    document.getElementById("charNum").innerHTML = valLength+' 
    characters';}

Answer 2

问问题之前你看起来不错吗？

看看这个，它也许可以为您提供帮助： Show how many characters remaining in a HTML text box using JavaScript

但是，如果您希望做的更简单，请看以下内容：

html：

<textarea id="field"></textarea>
       <div id="charNum"></div>

javascript：

$("#field").keyup(function(){
  el = $(this);
  if(el.val().length >= 11){
    el.val( el.val().substr(0, 11) );
  } else {
    $("#charNum").text(el.val().length + '/ 10' );
 }

}）;

Answer 3

在下面的代码片段中进行检查：

function countChars() {
  var val = document.getElementById("newInputID").value;
  var withSpace = val.length;
  // Without using regex
  //var withOutSpace = document.getElementById("newInputID").value.split(' ').join('').length;
  //with using Regex
  var withOutSpace = val.replace(/\s+/g, '').length;
  var wordsCount = val.match(/\S+/g).length;

  document.getElementById("wordCount").innerHTML = wordsCount + ' words';
  document.getElementById("charNumWithSpace").innerHTML = 'With space: ' + withSpace + '     characters';
  document.getElementById("charNumWithOutSpace").innerHTML = 'Without space: ' + withOutSpace + '     characters';
}

<html>

<body>
  <textarea name="new" charset="utf-8" id="newInputID" style="height:100px; Width:100%; line-height: 15px;" placeholder="Write something.." onkeyup="countChars()"></textarea>

  <p id="wordCount">0 Words</p>
  <p id="charNumWithSpace">0 characters</p>
  <p id="charNumWithOutSpace">0 characters</p>
</body>

</html>

Answer 4

function countChars(obj){
    const words = obj.value.split(' ');
    words.length // word count
    console.log('word count is ', words.length)

    const noSpaceString = obj.value.split(' ').join('');
    noSpaceString.length // string length with no space
    console.log('all characters without whits space ', noSpaceString.length)
}

使用简单JavaScript计算带空格和不带空格的文本区域字符

4 个答案: