JavaScriptで文字列内に指定した文字列が含まれるか検索するコードを紹介します。
文字列を検索するには indexOf() メソッドを利用します。
または
indexOfの戻り値は検索文字列が部分文字列内で見つかった位置の数値になります。検索文字列が見つからなかった場合は、-1 が戻ります。
indexOf の "O"は大文字であることに注意してください。
下記のHTMLファイルを準備します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function search() {
var input = document.getElementById("Text1").value;
var searchstr = document.getElementById("Text2").value;
var pos = input.indexOf(searchstr);
if (pos < 0) {
document.getElementById("output").innerHTML = "文字列は見つかりませんでした。"
}
else {
document.getElementById("output").innerHTML = pos + "番目(" + (pos + 1) + "文字目)に見つかりました。"
} }
</script>
</head>
<body>
入力<br />
入力文字列<input id="Text1" type="text" size="60" /><br />
検索文字列<input id="Text2" type="text" size="40" /><br />
<input id="Button1" type="button" value="処理" onclick="search();" /><br />
<hr />
結果<br />
<div id="output"></div>
</body>
</html>
[処理]ボタンをクリックすると search 関数を実行します。
search関数では、[入力文字列]のテキストボックスの値を input 変数に代入し、[検索文字列]のテキストボックスの値をsearchstr 変数煮た移入しています。
代入後、input変数のindexOf() メソッドを呼び出しinput変数中に searchstr の文字列があるかを検索します。検索結果は文字列が見つかった場合はもl焦れるが見つかった位置のインデックス番号を返します。見つからなかった場合は -1 (負の数)を返します。
戻り値が負の場合は「文字列は見つかりませんでした。」のメッセージを、正の場合は文字列が見つかった位置を画面に表示します。
function search() {
var input = document.getElementById("Text1").value;
var searchstr = document.getElementById("Text2").value;
var pos = input.indexOf(searchstr);
if (pos < 0) {
document.getElementById("output").innerHTML = "文字列は見つかりませんでした。"
}
else {
document.getElementById("output").innerHTML = pos + "番目(" + (pos + 1) + "文字目)に見つかりました。"
}
}
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
[入力文字列]と[検索文字列]のテキストボックスに文字列を入力します。入力後[処理]ボタンをクリックします。~
今回は「氷山の上にPenguinを発見」の入力文字列に対して「gui」を検索文字列に指定しているため、入力文字列内に検索文字列が存在するため、見つかった位置が画面に表示されます。
続いて検索文字列が入力文字列にない場合の動作を確認します。
[入力文字列]と[検索文字列]のテキストボックスに文字列を入力します。入力後[処理]ボタンをクリックします。~
「文字列は見つかりませんでした。」のメッセージが表示されます。
上記のコードでは、入力文字列内で最初に見つかる検索文字列の場所を探す動作でしたが、文字列に含まれるすべての検索文字列を探したい場合もあります。このセクションでは入力文字列に含まれるすべての検索文字列を探すコードを紹介します。
下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function search() {
var input = document.getElementById("Text1").value;
var searchstr = document.getElementById("Text2").value;
var result = [];
var pos = input.indexOf(searchstr);
while (0 <= pos) {
result.push(pos);
pos = input.indexOf(searchstr, pos+1);
}
if (result.length == 0) {
document.getElementById("output").innerHTML = "文字列は見つかりませんでした。"
}
else {
for (var i = 0; i < result.length; i++) {
document.getElementById("output").innerHTML += result[i] + "番目(" + (result[i] + 1) + "文字目)に見つかりました。<br/>"
}
}
}
</script>
</head>
<body>
入力<br />
入力文字列<input id="Text1" type="text" size="60" /><br />
検索文字列<input id="Text2" type="text" size="40" /><br />
<input id="Button1" type="button" value="処理" onclick="search();" /><br />
<hr />
結果<br />
<div id="output"></div>
</body>
</html>
基本は先の最初の検索位置を探すプログラムと同様ですが、すべての検索結果を取得するため、ループで繰り返し検索処理を実行します。
ループ内ではindexOfメソッドの第二引数に検索開始位置を与えています。直前に見つかった位置に +1 することで、見つかった位置以降の文字列から検索文字列を探す動作になります。検索文字列が見つからない場合は、indexOfの戻り値が負になり、whileループを抜け画面に結果を表示する動作となります。
var result = [];
var pos = input.indexOf(searchstr);
while (0 <= pos) {
result.push(pos);
pos = input.indexOf(searchstr, pos+1);
}
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
入力文字列と検索文字列を入力します。入力後[処理]ボタンをクリックします。
[結果]エリアに検索結果が表示されます。複数の結果が検出できています。
