indexOfメソッド

広告

indexOfメソッドは対象の文字列の中に指定した文字列が含まれるかどうか検索し、含まれていた場合は最初の見つかった位置を返します。 

indexOf(str[, start])

対象の文字列の先頭から引数に指定した文字列を検索します。

パラメータ:
  str  検索する文字列
  start  検索を開始する位置
戻り値:
  指定した文字列が含まれていた場合は最初に見つかった位置。見つからなかっ
  た場合は-1を返す。

対象の文字列の中に指定の文字列が含まれているかどうかを検索します。1番目の引数に検索したい文字列、2番目の引数に検索を開始する位置を指定します。2番目の引数を省略した場合は0が指定された場合と同じく対象の文字列の先頭から検索します。

次の例を見て下さい。 

var str_obj = "東京,大阪,神奈川,大阪,東京,大阪";
var index = str_obj.indexOf("大阪");

indexOfメソッドは開始位置を指定しなかった場合、対象の文字列の先頭から検索を行います。上記の場合最初に見つかるのは次の位置です。 

"東京,大阪,神奈川,大阪,東京,大阪"

この場合検索していた文字列の最初の文字である"大"の文字のインデックスが返されます。結果的に3が返されます。

今度は検索を開始する位置を指定した場合です。 

var str_obj = "東京,大阪,神奈川,大阪,東京,大阪";
var index = str_obj.indexOf("大阪", 6);

対象の文字列のインデックスが6の文字(今回の場合は"神"の文字の位置です)から検索を開始し、それ以降で最初に見つかった文字の位置を返します。今度の場合は次の位置のインデックスが返されます。 

"東京,大阪,神奈川,大阪,東京,大阪"

結果的に10が返されます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script14_1.js">
</script>

</body>
</html>

function print(str){
  document.write(str + "<br />");
}

function slicestr(start){
  print("開始位置 : " + start);

  var index = str_obj.indexOf(substr, start);

  print("出現位置 : " + index);

  str1 = str_obj.slice(0, index);
  str2 = str_obj.slice(index, index + substr.length);
  str3 = str_obj.slice(index + substr.length);

  print(str1 + "[" + str2 + "]" + str3);
}

var str_obj = "東京,大阪,神奈川,大阪,東京,大阪";
var substr = "大阪";

document.write("<p>");

print("対象文字列 : " + str_obj);
print("検索文字列 : " + substr);

document.write("</p>");

document.write("<p>");

slicestr(0);

document.write("</p>");

document.write("<p>");

slicestr(8);

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p14-1

( Written by Tatsuo Ikura )