JavaScriptの配列で特定の値の時にfor文の中身を書き換える

Question

###JavaScriptの配列で特定の値の時にfor文の中身を書き換える
JavaScript初心者です。よろしくお願い致します。
JavaScriptでformから配列を作成してリストで表示させるプログラムを書きたいです。
for文で配列からリストを表示させることができましたが、配列の中の特定の値だけ別のリストにしたいです。

例えば配列が['aaa', 'bbb', 'ccc'];で、bbbの時は

<li class="no'+ rank +'"><a href="#" class="special"><span>hoge</span></a></li>

でそれ以外は

<li class="no'+ rank +'"><a href="#">"+ brand_name[i] +"</a></li>

で、出力結果は

<li class="no1"><a href="#">aaa</a></li>
<li class="no2"><a href="#" class="special"><span>hoge</span></a></li>
<li class="no3"><a href="#">ccc</a></li>

です。配列の順番は変えずに特定の値の時だけ別の書き方をするという感じです。

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

	<textarea id="input_text"></textarea>
	<input type="button" value="button" onclick="getText()">

	<script type="text/javascript">
	function getText() {
		var input_text = document.getElementById('input_text').value;
		list_name = input_text.split(/\r\n|\r|\n/);
			rank = 1;
			for (var i = 0; i < list_name.length; i++) {
				document.write('<li class="no'+ rank +'"><a href="#"><span>'+ list_name[i] +'</span></a></li>');
				rank++;
			}
	}
	</script>

###試したこと
for文の中でif文を使ってif (list_name.indexOf("bbb") >= 0)の時とそれ以外で条件分岐しましたがこれだと配列の中に"bbb"が含まれている時の配列全体に条件が適用されてしまいました。配列だけを置換する方法はいろいろ見つかったのですが、該当するようなものを見つけることができませんでした。
たまたま作っていたのがこの形だっただけで全体的に変えた方がいいようなことがあれば教えていただけると嬉しいです！

よろしくお願いします。

Answer 1

indexOf は その名称から分かるとおり、 対象のArray(今回の場合 他にも Object, Stringでも使えます。)にindexされているかを見るモノです。
要素の有無の判断、対象の位置しか見ません。

なので、「中身が特定の値に一致するか」を見なければいけません。

var name = list_name[i];
if('bbb' === name) {

} else {

}

それと、インデントは揃えるべきです。

Comments

[romi]

とてもシンプルでわかりやすかったです。回答いただきありがとうございます！

Answer 2

if (list_name.indexOf("bbb") >= 0)
これではlist_name['aaa', 'bbb', 'ccc']の中からbbbを探してしまいます。よって、毎回OKになってしまうわけです。

ループで今回の要素からbbbを探すという意味ではlist_name[i]を使うべきです。
また、>=0ではbbbがその文字列の中に含まれる、という意味になるので、

if(list_name[i].indexOf("bbb") == 0 && list_name[i].length == "bbb".length){
  //処理
}

(文字列の先頭に"bbb"が含まれていて、文字列と"bbb"と長さが同じ)
とすると完全一致になると思います。

Comments

[romi]

なんでうまくいかなかったのかがよくわかりました。回答いただきありがとうございます！

Answer 3

li要素は ul / ol の子要素にしたほうが良いです。

<textarea id="input_text">aaa
bbb
ccc</textarea>
<input type="button" value="button" onclick="getText()">
<ul id="target"></ul>
<script>
function getText() {
	var input_text = document.getElementById( 'input_text' ).value;
	var output_text = '';
	var target = document.getElementById( 'target' );
	var list_name = input_text.split(/\r\n|\r|\n/);
	for ( var i = 0, rank = 1; i < list_name.length; i++, rank++ ) {
		if ( list_name[i] === 'bbb' ) { // 単純にここで分岐しては？
			output_text += '<li class="no'+ rank +'"><a href="#" class="special"><span>hoge</span></a></li>';
		} else {
			output_text += '<li class="no'+ rank +'"><a href="#"><span>'+ list_name[i] +'</span></a></li>';
		}
	}
	// まとめてHTMLを出力
	target.insertAdjacentHTML( 'afterbegin', output_text );
}
</script>
```**動くサンプル：**[https://jsfiddle.net/sdrL4uuk/](https://jsfiddle.net/sdrL4uuk/)

---

【HTML5でdocument.writeは使ってはいけない？ | 3streamer blog】
[http://blog.3streamer.net/html5-css3/document-write-html5-181/](http://blog.3streamer.net/html5-css3/document-write-html5-181/)

【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 - 01日目） | Ginpen.com】
[http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/](http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/)

【element.insertAdjacentHTML - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML)

Comments

[romi]

insertAdjacentHTML()初めて知りました！色々別の書き方も知れたのでベストアンサーにさせて頂きました。ありがとうございます！