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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

2回答

1467閲覧

JavaScript 文字列検索について

kichi_29

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2017/10/24 14:07

編集2022/01/12 10:55

###実現したいこと
①配列から文字列を検索し、検索した文字列が何番目にあるかhtml上に出力する。
②"AB"など二文字以上の文字を検索した場合も結果を出力する。

###発生している問題・エラーメッセージ
①アラートで表示する場合はすべてが表示されるが、innerHTMLで表示させると最後の番目しか出力されない。
②何個あるかはアラートで表示されるが、何番目にあるかは表示されない。

###該当のソースコード

javascript

1<html> 2<head> 3<meta chara="utf-8" /> 4<title>Sample</title> 5</head> 6 7 <script type="text/javascript> 8 var data="ABCDEFGFECBA"; 9 document.innerHTML=("文字列"+data); 10 </script> 11 12 <br><input type="button" value="サーチ" onClick="search()"> 13 14 <script type="text/javascript> 15 function search(){ 16 var moji=window.prompt("探したい文字は?"); 17 for(var i=0;i<=data.length;i++){ 18 var searchIndex = data.split(moji).length-1; 19 if(data[i]==moji){ 20 alert("先頭から"+(i+1)+"番目"); 21 } 22 } 23 alert("合計"+searchIndex+"個です。"); 24 } 25 </script> 26 27</body> 28</html>

出力する方法も良く分からでここで詰まっています。
初めて質問させていただきますので、至らない点もあると思いますがご教示の程よろしくお願いいたします。

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

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

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

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

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

karamarimo

2017/10/24 14:22

<script type="text/javascript>でクォーテーションが抜けてますよ。「innerHTMLで表示させると最後の番目しか出力されない」というコードを提示していただけますでしょうか。
kichi_29

2017/10/24 22:11

クォーテーションは打つ時のミスです。ありがとうございます。出力は、これしか方法が分からないためdocument.body.innerHTML = (data[i]+"番目")で行いました。
karamarimo

2017/10/25 02:08

それだとsuyamaさんのおっしゃるとおり innerHTML を上書きしてるので最後のしか表示されないですね。
kichi_29

2017/10/25 04:14

そこでとういった処置を取ればいいのか分からず困っています…。
guest

回答2

0

document.body.innerHTML = (data[i]+"番目")

=は代入ですので、左の値が右の値になります。当然これを繰り返せば最後に代入した値になります。
後ろに文字列を追加していきたいのであれば、
document.body.innerHTML = document.body.innerHTML + (data[i]+"番目");
あるいは
document.body.innerHTML += (data[i]+"番目");
とすればいいです。

ただdocument.body.innerHTMLを直接変更するのはいい方法とは言えないと思います。
結果を表示するための要素を適当に用意して、その内容を更新していけばいいと思います。

Demo

また、当然現在の方法では一文字の検索しかできないですが、一般の文字列を検索するにはsuyamaさんのおっしゃるようにString.prototype.indexOfを使うといいと思います。

しかしString.prototype.indexOfは最初のインデックスしか返さないので、繰り返し使用する必要があります。

幸いにもString.prototype.indexOfは第2引数としてどの位置から探すか指定できます。
例えば

lang

1var text = "caabcaabbaab"; 2var query = "aab"; 3var firstIndex = text.indexOf(query);

とすればfirstIndex = 1が得られますが、2つ目を見つけるにはfirstIndex + 1以降から探せばいいと分かります。

lang

1var secondIndex = text.indexOf(query, firstIndex + 1); 2// secondIndex == 5

String.prototype.indexOfは見つからなかったとき-1を返すので、-1を返すまでこの操作を繰り返せばいいということになります。

lang

1 var lastIndex = -1; 2 3 while (true) { 4 var nextIndex = data.indexOf(moji, lastIndex + 1); 5 if (nextIndex == -1) { 6 break; // while ループから抜ける 7 } else { 8 text.textContent += "先頭から" + (nextIndex + 1) + "番目。"; 9 lastIndex = nextIndex; 10 } 11 }

Demo2

投稿2017/10/25 04:56

karamarimo

総合スコア2551

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

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

0

提示されたコードでは、検索対象の文字列を、検索したい文字列で分割しています。
(1)についてはコード上に記述がないと思われるため推測になりますが、innerHTMLの上書きをしているためにそれまでの出力がなくなってしまっているのではないかと思います。
追記するための方法を考慮されるとよいかと思います。

(2)については、検索したい文字が1文字であれば動作するということであれば、data[i]==mojiではdataのi番目の1文字との比較を行っているものと思われます。
indexOfなどを使用して文字列の出現位置を確認されるとよいかと思います。

String.prototype.indexOf() - JavaScript | MDN

投稿2017/10/24 14:22

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問