JavaScriptのreplace関数を、以下のような方法で使う場合があると思います。
* replace()を使って文字列を置換する
* replace()を使って文字列を削除する
今回はjQueryでの使って行う方法を下記のHTMLを使って紹介したいと思います。
“`
<h1>jQuery Replace関数のサンプル</h1> <div> これはjQueryのReplace関数の使い方についてサンプルページです。<br/> 関数の使い方についてここで説明します。 </div>
“`
1.replace()を使って文字列を置換する
下記のHTMLのサンプルを使って説明をします。
```
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script text="text/javascript">
$(function() {
// replace関数による文字列の置換
var h1Text = $("h1").text();
h1Text = h1Text.replace("jQuery Replace", "replace");
$("h1").text(h1Text);
</script>
“`
上記のプログラムは、h1タグの「jQuery Replace」という文字列を、「replace」という文字列に置換するコードです。
ここで重量なことはreplace関数は文字列に対して行うため、JavaScriptやjQueryで取得するHTMLの要素オブジェクトではなく、要素内の文字列を取得してなければならないと言う点です。
“`
// h1Textが文字列ではなく、HTMLの要素オブジェクトのため、
// replace関数実行時にエラーになる
var h1Text = $("h1");
h1Text = h1Text.replace("jQuery Replace", "replace");
“`
またreplace関数を実行するだけだと、プログラム内の文字列は変化しますが、画面上には表示されません。
画面で表示する場合は、下記のように文字列が元々あったHTMLの要素オブジェクトへの値の設定も忘れずに行うようにしましょう。
“`
$("h1").text(h1Text);
“`
2.replace()を使って文字列を削除する
先ほどは文字列を置換しましたが、今度は特定の文字を削除する方法です。
“`
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script text="text/javascript">
$(function() {
// replace関数による文字列の削除
var divText = $("div").html();
divText = divText.replace("サンプル", "");
$("div").html(divText);
});
</script>
“`
上記のプログラムは、divタグの「サンプル」という文字列を削除するコードです。
先ほどの違いは以下の点です。
* replace関数の第２引数に空文字「””」を設定し、文字を削除している
* divタグの要素から文字列を取得/設定する方法が、text関数ではなく、html関数である
最初の提示したサンプルのように取得した文字列にHTMLのタグが含まれる場合は、text関数で取得していしまうと、文字列のみでタグが削除されてしまいます。
文字列にHTMLのタグが含まれる場合は、html関数で取得することで、タグが削除されずにHTML形式の文字列を維持したまま取得可能です。
【おすすめ記事】
➡短期集中！jQueryを教われるスクール10選
➡jQueryの本・参考書の評判
➡【無料】jQueryが身につく学習サイト5つまとめ
