jQueryでreplace()を使って置換・削除する

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

ネイティブのJavaScriptメソッドreplace()を使って、特定の文字列を別の文字に置換したり、削除する方法です。

複数の要素・文字列の処理、その他便利なjQueryメソッドも併せてご紹介します。

取得した文字列を一部書き換えたり削除したり、改行コードを置換したりと実際に使うことも多いかと思いますが、簡単に処理できますのでマスターしたいですね。

 

基本的な使い方

HTML上にある特定の文字列を、別の文字列に置き換えたり、削除して表示させます。

文字列の置換

まずは実際にHTMLの文字列を置換してみましょう。

HTML

jQuery

結果

ジェイクエリーを勉強する!

jQueryを勉強する!

ジェイクエリーという文字列をjQueryに置換できました。

上記の例だとp要素のテキストの一部を、以下の手順で別の文字列に置換しています。

  1. p要素の文字列を取得し、その文字列の一部をreplace()で置換、その結果を変数に格納
  2. 変数に格納した文字列をp要素に上書き

この2行で文字列は置換されますので、簡単ですね。

参考:text() でHTML要素にテキストを追加

文字列の削除

次に、HTML上にある特定の文字列を削除します。

HTML

jQuery

結果

ジェイクエリーを勉強する!

勉強する!

ジェイクエリーをという文字列を削除できました。

上記の例だとp要素のテキストの一部を、以下の手順で削除しています。

  1. p要素の文字列を取得し、その文字列の一部をreplace()''(空文字)に置換し、その結果を変数に格納
  2. 変数に格納した文字列をp要素に上書き

指定した文字列を''(空文字)に置き換えることで、結果的に削除されます。

replace()について

上記のreplace()/置換したい文字列/gという見慣れない構文が出てきましたが、これは正規表現による指定方法です。

正規表現を使えば、数値から始まる文字列を除外したり、3文字以下の文字列のみ抽出したり、アルファベットのみを抽出したりと様々な検索が簡単にできるため、とても便利ですね。

replace(/置換したい文字列/g, ‘置換後の文字列’);

/gなどの記号は以下の意味となります。

  • /…この記号に挟まれたパターンにマッチした文字列が対象
  • g…正規表現フラグ=>上記パターンにマッチした文字列全てを対象にする
    ※グローバルマッチを指定しなかった場合、最初にマッチした文字列1つしか対象にならない。

以下のような正規表現フラグを使えば高度な検索が可能です。

フラグ説明
gグローバルマッチ
i大文字と小文字の違いを無視する
m複数行を越えたマッチ(検索)

これら正規表現フラグは複数組み合わせて使うこともできます。

複数の処理

複数の要素を処理

複数のHTML要素の文字列をそれぞれ一括で置換します。

HTML

jQuery

結果

ハンバーグ定食
唐揚げ定食
ミックスフライ定食

ハンバーグランチ
唐揚げランチ
ミックスフライランチ

◯◯定食が◯◯ランチにそれぞれ置換されました。

each()を使えば複数の要素でも、上から1つずつループしながら、指定した要素全てを処理してくれるので便利です。

もちろん空文字に置換することで削除も可能です。

each()this()の使い方は以下のページで解説しています。

参考:jQueryのeach()で複数の要素、配列、オブジェクトをループ処理
参考:jQueryの$(this)の使い方(どこを指してるのか?)

複数の文字列 を処理

複数の文字列も処理できます。

HTML

jQuery

結果

唐揚げフライ定食
ハンバーグ定食
チキン南蛮フライ定食

唐揚げランチ
ハンバーグランチ
チキン南蛮ランチ

◯◯定食が◯◯ランチにそれぞれ置換され、不自然なフライの文字列はそれぞれ削除されました。

replace()をメソッドチェーンで複数繋ぐことで、このように複数の文字列をそれぞれ処理できます。

ちなみに、置換した文字列がその次のreplace()で置換対象になった場合、さらに置換されます。

さまざまな置換

その他、いろいろな置換方法をご紹介します。

改行コードの置換

テキストエリア内で改行しても、出力すると改行されていないことがありますが、これは改行タグ<br>が無いためです。

テキストエリア内で改行した際は改行コードが生成されますが、それを改行タグ<br>に置換することで、HTMLに出力しても改行されるようになります。

HTML

jQuery

結果(動作サンプル)

以下のフォームにテキストを改行しながら入力し、クリックしてみてください。

テキストがきちんと改行されて表示されるかと思います。


メールフォームの内容をデータベースに保存し、再出力する際など、用途は多いですね。

replaceWith()で要素の移動

jQueryメソッドのreplaceWith()を使えば、要素を移動させることもできます。

HTML

jQuery

結果

1.唐揚げ定食
2.ハンバーグ定食
3.チキン南蛮定食

3.チキン南蛮定食
2.ハンバーグ定食

3.チキン南蛮定食が、1.に上書きされました。

構文

$( 移動先の要素 ).replaceWith($( 移動元の要素 ));

replaceWith()で指定した引数がセレクタで指定した要素に移動します。

セレクタの要素は上書きされ、消滅します。

ちなみに以下のように、移動元はすでに存在している要素だけでなく、新たな要素も設定できますが、その場合html()メソッドのような動作になりますね。

jQuery

参考:html() でHTML要素ごと追加

replaceAll()で要素の移動

replaceWith()の逆バージョンで、指定したエレメントをreplaceAll()で指定した引数に移動させます。

jQuery

結果

1.唐揚げ定食
2.ハンバーグ定食
3.チキン南蛮定食

2.ハンバーグ定食
1.唐揚げ定食

先ほどとは逆で、1.唐揚げ定食が、3.に上書きされました。

構文

$( 移動元の要素 ).replaceAll($( 移動先の要素 ));

セレクタで指定した要素をreplaceAll()で指定した引数に移動します。

移動先の要素は上書きされ、消滅します。

replaceAll()も、新たに設定した要素の移動もできます。

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*