使用简单 JavaScript 计算带有 space 和不带白色-space 的文本区域字符

Question

为了计算在textarea中输入的字符，我有一个代码可以用space来计算单词之间的字符数。但我希望这两种功能都喜欢在简单 JavaScript 中用 space 和不带 space 的单词进行计数。

由于本人不是编程高手，无法尝试其他方法或框架。我更喜欢原生 JavaScript 代码。

当前 JavaScript 计算字符的代码 Space:

 

    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>

请帮我修改上面的代码，在有space和没有space的情况下计算textarea中的字符数。如果可能的话，我也期待字数统计功能。

我期待以下网站中已经存在的功能。 https://easywordcount.com or 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)
}

Answer 5

function WordCount() {

    var wordCounterwithSpace = 0;
    var wordCounterwithoutSpace = 0;
    var val = document.getElementById('textAreaId').value;

    for (var i = 0; i < val.length; i++) {
        if (val[i] == ' ') {
            wordCounterwithSpace++;
            continue;
        } else {
            wordCounterwithoutSpace++;
            wordCounterwithSpace++;
        }
    }
    console.log('With Spaces :', wordCounterwithSpace);
    console.log('Without Spaces :', wordCounterwithoutSpace);
}

使用简单 JavaScript 计算带有 space 和不带白色-space 的文本区域字符

Count text area characters with space and without white-space using Simple JavaScript

javascript

word-count

charactercount