JavaScriptのフィールドの単語の数を数える方法

HTML入力フィールドの単語の数を計算するには、まず入力のイベントリスナーを作成し、入力を行うたびに入力フィールドを監視します.

const textArea = document.querySelector('textarea'); // textarea or input
textArea.addEventListener('input', calculateWords);

The calculateWords() 関数は単語を計算する関数です.今、単語を計算する1つまたは複数の方法で行うことができます.我々は、ちょうど2を与えます.

ケースワン

function calculateWords(e) {
  return e.target.value.split(' ').length;
}

はい!つまり、入力フィールドの値をスペースで配列に分割し、配列の全長を計算するだけです.言い換えれば、最後の単語が後にスペースがあるときに配列に追加されます.はい!現在のように効率的ではない
私はちょうどスペースボタンを押し続けるか?
そのように、配列は増加し続けます、そして、配列の値は空です("").解決策は、確かにはい!このアプローチでこの問題を解決することができない理由は、実際に文字列を配列に変換するためには、何かによって分割する必要があります.スペース('')等
あなたが知っているように、言葉はスペースによって切り離されます.うん.しかし、配列が空の値(空白部分)を含まないことを言うならば、どうでしょう.以下に解決策を示します.

function calculateWords(e) {
  const splitArr = e.target.value.split(' ');
  const newSplitArr = splitArr.filter((value) => {
    return value; // returning values with content
  });
  console.log(newSplitArr);
}

そこに行く問題が解決.
ユーザーが遭遇する別の問題は、ユーザーがフィールドの値をクリアするときです.配列によって返されるこのような全長は、(入力フィールドが空の場合)1つになりますが、上記のフィルタリングで解決されます.
我々が利用する前にfilter() スペースボタンをクリックすると、単語数が増加します.つまり第一にcalculateWords() 関数はスペースで単語を決定するが、新しい単語はその単語の先頭にある単語を決定する.2つのテストを試してみてください
今、質問があった、誰かが私のブラウザの自動補完で動作するように頼んだ?
確かにはい!自動補完は、10個以下の単語を一緒に持ち、一度にフィールドに入力します.しかし、我々のイベントリスナーはoninput 言い換えると、それはフィールドに入ってくるすべての入力を見ます.入力がなされた限りcalculateWords() 関数は喜んで言葉の数を計算します.

症例2 :
正規表現

function calculateWords(e) {
  return e.target.value.match(/\S+/g).length;
}

私は正規表現があまり得意ではありませんが、誰かが私にこれを代替案として提案しました.そして、私がテストしたとき、フィールドが完全にクリアされるたびに、それはエラーを返します.エラーはmatch() メソッドがNULLである(フィールドが空であるため)null エラーを返します.既に解決策は簡単で、私に同意します

function calculateWords(e) {
  const fieldValue = e.target.value;
  let numOfWords;
  fieldValue
    ? (numOfWords = fieldValue.match(/\S+/g).length)
    : (numOfWords = 0);
  console.log(numOfWords);
}

そこには2つのケースをテストしてみてください.二つは100 %働く.