質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

657閲覧

JSでの特定文字列のカウントができないです。

at714

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/08/01 14:04

前提・実現したいこと

JavaScriptで総文字数と特定文字列を数えたいです。

発生している問題・エラーメッセージ

特定文字数がカウントできないです。
そもそもJavaScriptが理解できていないのが原因ですが、
どなたか教えてもらえませんでしょうか。

該当のソースコード

JavaScript

1//総文字数カウント 2window.addEventListener('DOMContentLoaded', 3 function(){ 4 var node = document.getElementById('count-text'); 5 node.addEventListener('keyup',function(){ 6 var count = this.value.length 7 var counterNode = document.querySelector('.show-count-text'); 8 counterNode.innerText = count; 9 },false); 10 },false 11); 12 13//特定文字列カウント 14window.addEventListener('DOMContentLoaded', 15 function(){ 16 var node = document.getElementById('txt1'); 17 node.addEventListener('keyup',function(){ 18 var targetStr = "プログラミング"; 19 var counterNode = document.querySelector('.show-count-text2'); 20 counterNode.innerText = count; 21 },false); 22 },false 23);

HTML

1<div class="form-group"> 2 <label>内容:*必須 <span class="help-block"></span> 3 <textarea name="comment" id="count-text" cols="100" rows="10" class="valid-textarea"></textarea> 4 <div class="counter-container">総文字数<span class="show-count-text">0</span>/100</div> 5 <div class="counter-container">プログラミング<span id="show-count-text2">0</span>個</div> 6 </label> 7 </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

【String.prototype.indexOf() - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf#Using_indexOf()_to_count_occurrences_of_a_letter_in_a_string

ある文字列中で、ある 1 つの文字が出現する回数を数えるために indexOf() を使う

投稿2019/08/01 14:08

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

at714

2019/08/02 23:24

ご回答ありがとうございます。 私のレベルが低いので少し理解に時間がかかりそうです。 String.prototype.indexOf()を使ってHTMLの値を取得し その結果を再度HTMLに返すやり方もわからずでして。。。
guest

0

ベストアンサー

こういうのはどうでしょう?

javascript

1<script> 2window.addEventListener('DOMContentLoaded',function(){ 3 var node = document.querySelector('#count-text'); 4 node.addEventListener('keyup',function(e){ 5 var v=e.target.value 6 var count = v.length; 7 var counterNode = document.querySelector('.show-count-text'); 8 counterNode.textContent = count; 9 var targetStr = "プログラミング"; 10 var count = v.split(targetStr).length -1; 11 var counterNode = document.querySelector('.show-count-text2'); 12 counterNode.textContent = count; 13 }); 14}); 15</script> 16<div class="form-group"> 17<label>内容:*必須 <span class="help-block"></span> 18<textarea name="comment" id="count-text" cols="100" rows="10" class="valid-textarea"></textarea> 19<div class="counter-container">総文字数<span class="show-count-text">0</span>/100</div> 20<div class="counter-container">プログラミング<span class="show-count-text2">0</span></div> 21</label> 22</div>

投稿2019/08/02 01:26

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

at714

2019/08/03 04:37

コメントありがとうございます。 試したところ動きました。ただ理解が追い付いてなく。。。 私なりに理解するためコードを以下のように解読してみたのですが、 お時間あるときで結構ですので、以下を確認していただけますでしょうか。 また【.length -1】がわからないです。 ===== DOMContentLoadedでHTMLドキュメントの読み込みと解析が完了した時に、以下の処理を発火する function()で{}の中の関数を呼び出す #count-textの値をnodeの箱に入れる keyupでキーボードのキーが押されたときに関数eのイベントを処理する var v=e.target.value function e の文字列の要素数を取得 var count = v.length; vの配列の要素数をcountの箱に入れる .show-count-textのHTML要素を取得してcounterNodeの箱に入れる。結果をHTML上に表示する counterNodeのテキスト情報を取得し数えます var targetStrの箱にプログラミングという言葉を入れます var count = v.split(targetStr).length -1; ※ここのマイナス1はどういう意味なんでしょうか? .show-count-text2のHTML要素を取得してcounterNodeの箱に入れる。結果をHTML上に表示する counterNodeのテキスト情報を取得し数えます =======
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問