Javascript TIPS No.13 文字列の置換 その1「replace」
- Javascriptでの置換は超簡単！
- 簡単！ 便利！ 高速(じゃない)…
文法
文字列(全体).replace(対象の文字列,書き換え後の文字列)
サンプルコード
<html lang="ja-JP"> <head><title>文字列の置換</title> <script type="text/javascript"> function Himitu(){ myStr = document.getElementById('gyoza').innerHTML; myStr = myStr.replace("新発売！ダイエットギョーザ","新発売！ダイエットギョーザ[毒入り]"); document.getElementById('gyoza').innerHTML = myStr; } </script> </head> <body> <div id="gyoza">新発売！ダイエットギョーザ</div> <input type="button" onClick="Himitu()" value="秘密の成分を見る"> </body> </html>
解説
- 文字列を書き換えるプログラムです
処理1(エレメントから元となる文字列を取得)
- 指定のエレメント(gyoza)からinnerHTML(新発売！ダイエットギョーザ)を取得し、変数(myStr)に格納
myStr = document.getElementById('gyoza').innerHTML;
処理2(文字列の置換)
- 変数(myStr)に格納された文字列(新発売！ダイエットギョーザ)を文字列(新発売！ダイエットギョーザ[毒入り])に書き換える
myStr = myStr.replace("新発売！ダイエットギョーザ","新発売！ダイエットギョーザ[毒入り]");
処理3(文字列の出力)
- エレメント(gyoza)のinnerHTMLにmyStrを出力する
document.getElementById('gyoza').innerHTML = myStr;
- 上の3つの処理は以下のような流れになっています
文字を取り出す
↓
文字を書き換える
↓
文字を戻す
- 処理が1瞬なので、感覚がつかみにくいですが、ようするに「棚からりんごを取ってかじって戻す」と同じです。
- 上のプログラムでは、文字を一つしか書き換えることができません
- ループを使おうにも、対象の文字列がいくつあるか分からない場合は面倒くさいですね
- 次のエントリでは、置換対象の文字列が複数あった場合の、replaceの使い方を紹介します
