目次
例 1: HTML および JavaScript コードを使用して、テキスト内のスペースと改行を数えることによって単語 Count
コード設計の手順
結果の表示 - 例 1
例 2: HTML と JavaScript コードを使用したテキスト分割方法による単語数の検索
結果を見る
ホームページ ウェブフロントエンド jsチュートリアル JavaScript を使用してテキスト領域の単語数をカウントするにはどうすればよいですか?

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

Sep 08, 2023 pm 05:09 PM

如何使用 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか? Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか? Mar 13, 2025 pm 12:28 PM

この記事では、Javaのコレクションフレームワークの効果的な使用について説明します。 データ構造、パフォーマンスのニーズ、スレッドの安全性に基づいて、適切なコレクション(リスト、セット、マップ、キュー)の選択を強調しています。 コレクションの使用を効率的に最適化します

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

chart.js:パイ、ドーナツ、バブルチャートを始めます chart.js:パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js:ラインチャートとバーチャート(チュートリアル2)、およびレーダーチャートと極地域チャート(チュートリアル3)を学びました。 パイとリングチャートを作成します パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。 パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

See all articles