JavaScriptのindexOf()メソッドを使うと文字列や配列に指定の値がないかを検索する事ができます。本コラムでは、indexOf()メソッドの使い方をサンプルコードと共に解説します。
目次
1.1. indexOf()メソッドの基本書式
1.2. パラメーター
1.3. 戻り値
2.1. 特定の文字列を検索してインデックスを取得する方法
2.2. 検索位置を指定して文字列を検索する方法
2.3. 配列を検索して位置を取得する方法
2.4. lastIndexOfメソッドで配列を後方検索する方法
1. indexOf()メソッド
1.1. indexOf()メソッドの基本書式
●indexOf()メソッド
stringObj.indexOf(searchvalue, [from])
1.2. パラメーター
searchvalue:検索対象の文字列を指定します。searchvalueは、文字列の他、配列を指定する事もできます。
from:（省略可能）検索の開始位置を指定します。
1.3. 戻り値
検索対象の文字列もしくは配列から指定した値があるかを検索しインデックスを返します。検索対象がない場合は「-1」を返します。
2. indexOf()メソッドの使い方
2.1. 特定の文字列を検索してインデックスを取得する方法
指定した文字が検索対象の文字列にある場合、indexOf()メソッドでそのインデックスを取得する事ができます。
var stringObj = "検索対象の文字列";
stringObj.indexOf("検索する文字列"); //指定の文字列を検索する
サンプルHTMLの「JS_Sample1.html」をコピーして置換の動作を確認してみましょう。ローカルPCで保存する場合は、ファイル形式を「utf-8」にします。
●JS_Sample1.html ---------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>indexOf() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
<button onclick="strFunction01()">indexOfの実行</button>
<p id="sample1"></p>
<script>
function strFunction01() {
var strObj = "検索したい文字列を指定します。";
var result = strObj.indexOf("し");
document.getElementById("sample1").innerHTML = result;
}
</script>
</body>
</html>
---------------------
「indexOf実行」ボタンをクリックして動きを確認して下さい。Stringオブジェクトの「strObj」に「し」の文字列があるかどうかを検索します。一番最初にの「し」はインデックス２になりますので、サンプルコードのボタンをクリックするとブラウザーには「2」と表示されます。
●実行結果
ボタンをクリックすると、指定の文字列を検索した結果が返されます。
2.2. 検索位置を指定して文字列を検索する方法
検索する場所を指定すると、指定した位置から対象の文字列を検索します。
var stringObj = "検索対象の文字列";
stringObj.indexOf("検索する文字列", 検索開始位置); //指定の位置から文字列を検索する
●JS_Sample2.html ---------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>indexOf() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
<button onclick="strFunction02()">indexOfの実行</button>
<p id="sample2"></p>
<script>
function strFunction02() {
var strObj = "検索したい文字列を指定します。";
var result = strObj.indexOf("し", 3);
document.getElementById("sample2").innerHTML = result;
}
</script>
</body>
</html>
---------------------
検索対象文字列の「検索したい文字列を指定します。」には「し」が二文字ありますが、インデックス3から検索を開始しますので、二つ目の「し」のインデックス「11」が戻り値になります。
●実行結果
ボタンをクリックすると、指定の文字列を検索した結果が返されます。
2.3. 配列を検索して位置を取得する方法
indexOfメソッドで「配列要素」を検索する事もできます。
var stringObj = "検索対象の配列";
stringObj.indexOf("検索する配列", 検索開始位置); //指定の位置から配列を検索する
●JS_Sample3.html ---------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>indexOf() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
<button onclick="strFunction03()">indexOfの実行</button>
<p id="sample3"></p>
<script>
function strFunction03() {
var arrObj = ["りんご", "ばなな", "りんご", "ぶどう"];
var result = arrObj.indexOf("りんご", 1);
document.getElementById("sample3").innerHTML = result;
}
</script>
</body>
</html>
---------------------
サンプルコードは、indexOfメソッドで指定した「りんご」が配列要素にあるかを検索し、該当する値があれば配列のインデックスを返します。引数に指定したインデックス「１」から検索を開始しますので、インデックス０の「りんご」ではなく、二つ目の「りんご」のインデックス「２」が戻り値になります。
●実行結果
ボタンをクリックすると、指定の文字列を検索した結果が返されます。
2.4. lastIndexOfメソッドで配列を後方検索する方法
lastIndexOfメソッドを使うと配列要素を後ろから検索して結果を返します。
var stringObj = "検索対象の配列";
stringObj.lastIndexOf("検索する配列", 検索開始位置); //指定の位置から配列を検索する
lastIndexOfメソッドの第二引数に値を指定しない場合には、最後の要素から最初の要素に向かって検索しますが、値を指定すると任意のインデックスから検索を開始します。
●JS_Sample4.html ---------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>indexOf() method - Introduction to JavaScript</title>
<body>
<p>ボタンをクリックすると、指定の文字列を検索した結果が返されます。</p>
<button onclick="strFunction04()">indexOfの実行</button>
<p id="sample4"></p>
<script>
function strFunction04() {
var arrObj = ["りんご", "ばなな", "ぶどう", "りんご"];
var result = arrObj.lastIndexOf("りんご", 2);
document.getElementById("sample4").innerHTML = result;
}
</script>
</body>
</html>
---------------------
配列変数「arrObj」に「りんご」の文字が含まれているかを検索します。検索位置を「２」と指定しているので、配列インデックスの「２」→「１」→「０」と後ろから検索し、最初に見つかったインデックスを返します。サンプルコードでは、インデックス「０」と「３」に”りんご”が含まれますので、ブラウザーには「０」が表示されます。
●実行結果
ボタンをクリックすると、指定の文字列を検索した結果が返されます。
