文字の置換JavaScript入門

文字置換サンプル

では以下のスクリプトをHTMLのBODY内に記入してみてください。

<script>

var str
 = "文字を置換するには、##replace()%%を使います。"
 + "括弧内の最初に##検索文字列%%、2番目に##置換文字列%%を記入します。"
 + "結果は、##最初にHitした文字列%%が置換された状態で返されます。";

//文字を置換する
str = str.replace("##","<strong>");
str = str.replace("%%","</strong>");

document.write(str);

</script>

＜上記スクリプトの結果＞

前回は配列を使って長文を作成しましたが、 今回は長い文字列をそのまま変数strに代入しました。 ページで表示する関係上、3行に分けて「+」で繋いでいます。

そして、文字を置換する命令文replace()を使い、 「##」と「%%」を開始タグ，終了タグに置き換えます。 replaceの括弧内は、最初が検索文字列、2番目が置換文字列となります。

文字列.replace( 検索文字列 , 置換文字列 )

文字列の置換を行います

しかし、上記のスクリプトの結果を見ると分かるように、 最初にHitした箇所しか置換されていません。 これでは不便なので、続く部分で全ての箇所を書き換える方法について見てみましょう。

全ての箇所を一括で置換する

replace()は最初にHitした文字列の置換しか行わないので、 文字列全体の中に複数置換したい場所がある場合は何らかの手を打たなければなりません。 方法は以下のようなものがあります。

1番目は直感的で分かりやすいかも知れませが、少し記述が長くなります。 以下のような感じになります。

while ( str.indexOf("##",0) != -1 )
{
  str=str.replace("##","<strong>");
}

//終了タグの方も同様にする

2番目の正規表現というのは、高度な検索を行うための記述法です。 以下のようにすると、検索文字列にマッチする全ての部分を書き換えることができます。

<script>

var str
 = "文字を置換するには、##replace()%%を使います。"
 + "括弧内の最初に##検索文字列%%、2番目に##置換文字列%%を記入します。"
 + "結果は、##最初にHitした文字列%%が置換された状態で返されます。";

//文字を置換する
str=str.replace(/##/g,"<strong>");
str=str.replace(/%%/g,"</strong>");

document.write(str);

</script>

＜スクリプトの結果＞

今回は全ての部分でHTMLタグに置換することができました。 正規表現を使ったほうが記述が簡単になります。

次のページでは、この正規表現を使った検索について簡単に解説します。