ネイティブのJavaScriptメソッドreplace()を使って、特定の文字列を別の文字に置換したり、削除する方法です。
複数の要素・文字列の処理、その他便利なjQueryメソッドも併せてご紹介します。
取得した文字列を一部書き換えたり削除したり、改行コードを置換したりと実際に使うことも多いかと思いますが、簡単に処理できますのでマスターしたいですね。
目次
基本的な使い方
HTML上にある特定の文字列を、別の文字列に置き換えたり、削除して表示させます。
文字列の置換
まずは実際にHTMLの文字列を置換してみましょう。
HTML
|
1 |
<p>ジェイクエリーを勉強する！</p> |
jQuery
|
1 2 3 4 5 |
//文字列を置換し変数に格納 var str = $('p').text().replace(/ジェイクエリー/g, 'jQuery'); //上記で格納した文字列で上書き $('p').text(str); |
結果
ジェイクエリーを勉強する！
↓
jQueryを勉強する！
ジェイクエリーという文字列をjQueryに置換できました。
上記の例だとp要素のテキストの一部を、以下の手順で別の文字列に置換しています。
p要素の文字列を取得し、その文字列の一部をreplace()で置換、その結果を変数に格納- 変数に格納した文字列を
p要素に上書き
この2行で文字列は置換されますので、簡単ですね。
文字列の削除
次に、HTML上にある特定の文字列を削除します。
HTML
|
1 |
<p>ジェイクエリーを勉強する！</p> |
jQuery
|
1 2 3 4 5 |
//文字列を空文字に置換し変数に格納 var str = $('p').text().replace(/ジェイクエリーを/g, ''); //上記で格納した文字列で上書き $('p').text(str); |
結果
ジェイクエリーを勉強する！
↓
勉強する！
ジェイクエリーをという文字列を削除できました。
上記の例だとp要素のテキストの一部を、以下の手順で削除しています。
p要素の文字列を取得し、その文字列の一部をreplace()で''（空文字）に置換し、その結果を変数に格納- 変数に格納した文字列を
p要素に上書き
指定した文字列を''（空文字）に置き換えることで、結果的に削除されます。
replace()について
上記のreplace()で/置換したい文字列/gという見慣れない構文が出てきましたが、これは正規表現による指定方法です。
正規表現を使えば、数値から始まる文字列を除外したり、3文字以下の文字列のみ抽出したり、アルファベットのみを抽出したりと様々な検索が簡単にできるため、とても便利ですね。
replace(/置換したい文字列/g, ‘置換後の文字列’);
/やgなどの記号は以下の意味となります。
/…この記号に挟まれたパターンにマッチした文字列が対象g…正規表現フラグ=>上記パターンにマッチした文字列全てを対象にする
※グローバルマッチを指定しなかった場合、最初にマッチした文字列1つしか対象にならない。
以下のような正規表現フラグを使えば高度な検索が可能です。
| フラグ | 説明 |
|---|---|
| g | グローバルマッチ |
| i | 大文字と小文字の違いを無視する |
| m | 複数行を越えたマッチ（検索） |
これら正規表現フラグは複数組み合わせて使うこともできます。
複数の処理
複数の要素を処理
複数のHTML要素の文字列をそれぞれ一括で置換します。
HTML
|
1 2 3 4 5 |
<ul> <li>ハンバーグ定食</li> <li>唐揚げ定食</li> <li>ミックスフライ定食</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
//eachで<li>要素全てを処理する $('li').each(function() { //文字列を置換し変数に格納 var str = $(this).text().replace(/定食/g, 'ランチ'); //上記で格納した文字列で上書き $(this).text(str); }); |
結果
ハンバーグ定食
唐揚げ定食
ミックスフライ定食
↓
ハンバーグランチ
唐揚げランチ
ミックスフライランチ
◯◯定食が◯◯ランチにそれぞれ置換されました。
each()を使えば複数の要素でも、上から1つずつループしながら、指定した要素全てを処理してくれるので便利です。
もちろん空文字に置換することで削除も可能です。
each()やthis()の使い方は以下のページで解説しています。
参考：jQueryのeach()で複数の要素、配列、オブジェクトをループ処理
参考：jQueryの$(this)の使い方(どこを指してるのか？)
複数の文字列 を処理
複数の文字列も処理できます。
HTML
|
1 2 3 4 5 |
<ul> <li>唐揚げフライ定食</li> <li>ハンバーグ定食</li> <li>チキン南蛮フライ定食</li> </ul> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
//eachで<li>要素全てを処理する $('li').each(function() { //replace()を複数繋げて処理し、変数に格納 var str = $(this).text().replace(/定食/g, 'ランチ').replace(/フライ/g, ''); //上記で格納した文字列で上書き $(this).text(str); }); |
結果
唐揚げフライ定食
ハンバーグ定食
チキン南蛮フライ定食
↓
唐揚げランチ
ハンバーグランチ
チキン南蛮ランチ
◯◯定食が◯◯ランチにそれぞれ置換され、不自然なフライの文字列はそれぞれ削除されました。
replace()をメソッドチェーンで複数繋ぐことで、このように複数の文字列をそれぞれ処理できます。
ちなみに、置換した文字列がその次のreplace()で置換対象になった場合、さらに置換されます。
さまざまな置換
その他、いろいろな置換方法をご紹介します。
改行コードの置換
テキストエリア内で改行しても、出力すると改行されていないことがありますが、これは改行タグ<br>が無いためです。
テキストエリア内で改行した際は改行コードが生成されますが、それを改行タグ<br>に置換することで、HTMLに出力しても改行されるようになります。
HTML
|
1 2 |
<textarea rows="8" cols="25"></textarea> <button>クリック</button> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 |
//ボタンをクリックしたら発動 $('button').click(function() { //テキストエリア内の文字列を変数に格納 var txt = $('textarea').val(); //変数内の文字列の改行コードを改行タグに変換し、ボタンの隣に出力 $(this).after('<p>'+txt.replace(/\r|\n|\r\n/g, '<br>')+'</p>'); }); |
結果（動作サンプル）
以下のフォームにテキストを改行しながら入力し、クリックしてみてください。
テキストがきちんと改行されて表示されるかと思います。
メールフォームの内容をデータベースに保存し、再出力する際など、用途は多いですね。
replaceWith()で要素の移動
jQueryメソッドのreplaceWith()を使えば、要素を移動させることもできます。
HTML
|
1 2 3 4 5 |
<ul> <li id="one">唐揚げ定食</li> <li id="two">ハンバーグ定食</li> <li id="three">チキン南蛮定食</li> </ul> |
jQuery
|
1 2 |
//replaceWith()で指定した要素を移動させる $('#one').replaceWith($('#three')); |
結果
1.唐揚げ定食
2.ハンバーグ定食
3.チキン南蛮定食
↓
3.チキン南蛮定食
2.ハンバーグ定食
3.チキン南蛮定食が、1.に上書きされました。
構文
$( 移動先の要素 ).replaceWith($( 移動元の要素 ));
replaceWith()で指定した引数がセレクタで指定した要素に移動します。
セレクタの要素は上書きされ、消滅します。
ちなみに以下のように、移動元はすでに存在している要素だけでなく、新たな要素も設定できますが、その場合html()メソッドのような動作になりますね。
jQuery
|
1 2 |
//replaceWith()は新たな要素も追加可能 $('#two').replaceWith('<li>チーズハンバーグ定食</li>'); |
replaceAll()で要素の移動
replaceWith()の逆バージョンで、指定したエレメントをreplaceAll()で指定した引数に移動させます。
jQuery
|
1 2 |
//replaceAll()で指定した要素を移動させる $('#one').replaceAll($('#three')); |
結果
1.唐揚げ定食
2.ハンバーグ定食
3.チキン南蛮定食
↓
2.ハンバーグ定食
1.唐揚げ定食
先ほどとは逆で、1.唐揚げ定食が、3.に上書きされました。
構文
$( 移動元の要素 ).replaceAll($( 移動先の要素 ));
セレクタで指定した要素をreplaceAll()で指定した引数に移動します。
移動先の要素は上書きされ、消滅します。
replaceAll()も、新たに設定した要素の移動もできます。
