ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript を使用してテキスト領域の単語数をカウントするにはどうすればよいですか?

JavaScript を使用してテキスト領域の単語数をカウントするにはどうすればよいですか?

PHPz
リリース: 2023-09-08 17:09:06
転載
1872 人が閲覧しました

如何使用 JavaScript 对文本区域进行字数统计?

入力ボックスまたはテキスト領域に入力された単語の数を数えることがタスクになる場合があります。複数行のテキストを表示したい場合は、通常、テキスト領域を使用します。テキスト領域にテキストを入力するとき、ユーザーは単語間または行間の区切り文字としてスペースを使用できます。この記事では、HTML、JavaScript コード、および Jquery ライブラリを使用して入力テキスト内の単語をカウントするプロセスを説明します。これを 2 つの異なる例を使用して説明します。最初の例では、入力されたスペースまたは改行をカウントして単語数を見つけます。 2 番目の例では、まず改行を単純なスペースに置き換えてから、テキスト分割を使用してテキストをスペースで分割し、単語数を調べます。

例 1: HTML および JavaScript コードを使用して、テキスト内のスペースと改行を数えることによって単語 Count

を検索します。

コード設計の手順

  • ステップ 1 - HTML ファイルを作成し、コードの記述を開始します。

  • ステップ 2 - 3 つの

    タグを作成します。異なる ID が与えられます。そのうちの 1 つはテキストを表示します。 2 つ目は単語数を表示します。 3番目には文字数が表示されます。

  • ステップ 3 - 関数を作成し、関数内の for ループを使用して入力テキストの文字数のカウントを開始します。スペースまたは改行が入力されているかどうかを確認し、単語数をインクリメントします。

  • ステップ 4 - ボタンを作成し、ボタンがクリックされたときに上記の関数を呼び出します。

  • ステップ 5 - プログラムを実行して結果を確認します。

リーリー

結果の表示 - 例 1

結果を確認するには、ブラウザで HTML ファイルを開きます。ボタンをクリックして結果を確認してください。

例 2: HTML と JavaScript コードを使用したテキスト分割方法による単語数の検索

コード設計の手順

  • ステップ 1 - HTML ファイルを作成し、コードの記述を開始します。

  • ステップ 2 - 3 つの

    タグを作成します。異なる ID が与えられます。そのうちの 1 つはテキストを表示します。 2 つ目は単語数を表示します。 3番目には文字数が表示されます。

  • ステップ 3 - 関数を作成し、その中に改行文字があるかどうかを確認します。スペースに置き換えてください。次に、テキストを空間内で分割し、その部分を配列に格納します。配列に入力された単語の数が単語数になります。

  • ステップ 4 - ボタンが作成され、このボタンがクリックされると上記の関数が呼び出されます。

  • ステップ 5 - プログラムを実行し、結果を表示します。

ここでは単語が分離されて配列に入れられます。

リーリー

結果を見る

結果を表示するには、ブラウザで HTML ファイルを開きます。次に、テキスト領域にいくつかの行を入力します。単語数を表示するには、[単語数] ボタンをクリックします。

この JavaScript-HTML 記事では、2 つの異なる例を使用して、テキスト領域に入力された単語の数をカウントする方法を示します。まず、単語間の入力スペースと入力改行を分析して単語数を求める方法が提供されます。 2 番目の例では、すべての改行を単純なスペースに変換した後、入力スペースでテキスト分割方法が使用されます。

以上がJavaScript を使用してテキスト領域の単語数をカウントするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート