文字を検索するJavaScript入門

indexOf()による文字の検索と置換

JavaScriptを使って長い文章を表示する場合、 または複雑なHTMLタグを用いる場合、 タグを何かの文字に置き換えておいて、 表示する時にタグに戻すとスッキリします。 以下のスクリプトは強調タグ<strong></strong>を「##」「%%」に置き換え、 document.write()で表示する前にタグに戻しています。

<script>

//長い文字列を配列に格納
var str = new Array(
"文字を検索するには、##indexOf()%%を使います。",
"括弧内には##検索文字列%%と、##検索開始位置%%を指定します。",
"検索文字が存在すると、##文字の位置%%を返します。",
"検索文字が存在しないと、##-1%%を返します。"
);

//配列の文字列を順番に表示
for ( var i = 0 ; i < 4 ; i++ )
{
  //while文を使って無限ループにする
  while(true)
  {
    //「##」を検索し、文字位置を変数numに代入
    var num = str[i].indexOf("##",0);

    //もし「##」が無ければ、無限ループから出る
    if (num == -1) break;

    var tag = "<strong>";

    //「##」の前まで切り取る
    var str1 = str[i].substring(0,num);
 
    //「##」の後ろを切り取る
    var str2 = str[i].substring(num+2,str[i].length);

    //「##」を変数tagに代入したHTMLタグに置き換える
    str[i] = str1 + tag + str2;
  }
  
  //終了タグに関しても同様の処理をする
  while(true)
  {
    var num = str[i].indexOf("%%",0);
    if (num == -1) break;
    var tag = "</strong>";
    var str1 = str[i].substring(0,num);
    var str2 = str[i].substring(num+2,str[i].length);
    str[i] = str1 + tag + str2;

  }
  //HTMLに置き換えられた文字列を表示
  document.write(str[i]);
}

</script>

サンプル（別窓）

スクリプトの解説

では上記のソースについて見ていきましょう。 最初に配列strに表示する文字列を記入しています。 開始タグの位置に「##」、終了タグの位置に「%%」を記入します。

続いてfor文を使って、配列の文字列を順に表示していきます。 しかしdocument.write()で表示する前に、HTMLタグを組み込む処理を行います。

while文を使った文字の置換処理部分について見て下さい。 while文を使うのは、str[i]の中に何回「##」が出てくるか分からないからです。 while()の括弧内は繰り返し条件を記入するのですが、今回はtrueとしました。 つまり無限に繰り返すように指定した訳です。

while文の中で、最初に「##」の位置を調べます。 ここで使うのがindexOf()ですが、おさらいしておきましょう。

文字列.indexOf(検索文字,検索開始位置)

文字列の中から特定の文字を検索し、存在すればその位置を取得します

「##」の位置を変数numに格納します。 もし存在しなければ変数numには-1が入るので、 if文で「##」が存在しているかどうか調べます。 もし無いのであれば、変換処理が終了しているということです。 breakを使って無限ループから脱出します。 この処理を忘れたらブラウザが暴走するので、絶対忘れないようにしましょう。

変数tagに、置換するHTMLタグを代入します。 変数str1には「##」の前までの文字を、変数str2には「##」の後ろの文字を抜き出します。 文字の抜き出しはsubstring()を使います。後ろ側を抜き出す時の開始位置ですが、 indexOf()で取得した「##」の位置に2文字（つまり##）を加えた所となります。 終了位置はlengthを使って文字列長を取得すればOKです。

最後にstr[i]を、「##」をHTMLタグに置き換えた文字列に書き換えています。 「##」が複数あれば再びWhile文の中で置き換えが行われ、 「##」が存在しなくなるまで繰り返されます。

終了タグの置き換えについても同様の処理を行っています。

今回見たwhile文を使った無限ループは良く使います。 勿論下のようにきちんと条件を指定することも可能です。

while( str[i].indexOf("##",0) != -1 )
{
  置換処理
}

個人的には無限ループを使う方が好きなのですが、 条件をきちんと記入した方が理解しやすいかも知れません。 どちらでも好きな方を使ってください。 ただし無限ループは抜け出す処理を書き忘れないように気をつけて下さい。