【jQuery入門】replaceを使って文字を置換、削除する方法

公開日：2016-12-12 最終更新日：2017-2-8
プロナビTOP / プログラミング初心者向け技術系ノウハウ・まとめ

JavaScriptのreplace関数を、以下のような方法で使う場合があると思います。

* replace()を使って文字列を置換する
* replace()を使って文字列を削除する

今回はjQueryでの使って行う方法を下記のHTMLを使って紹介したいと思います。




		
		
			
			

			
					<h1>jQuery Replace関数のサンプル</h1>
		<div>
			これはjQueryのReplace関数の使い方についてサンプルページです。<br/>
			関数の使い方についてここで説明します。
		</div>
			
				
					
				
					1
2
3
4
5
				
								<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>

```

$(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");

// h1Textが文字列ではなく、HTMLの要素オブジェクトのため、

// replace関数実行時にエラーになる

var h1Text = $("h1");

h1Text = h1Text.replace("jQuery Replace", "replace");


またreplace関数を実行するだけだと、プログラム内の文字列は変化しますが、画面上には表示されません。

画面で表示する場合は、下記のように文字列が元々あったHTMLの要素オブジェクトへの値の設定も忘れずに行うようにしましょう。

$("h1").text(h1Text);

1	$("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>