jQueryで複数箇所をreplaceで文字列置換する方法!

jQueryで複数箇所をreplaceで文字列置換する方法についてサンプルコード付きで解説します。jQueryで複数箇所をreplaceするには少し工夫をするだけで簡単に実行することができます。では見ていきましょう。

コンテンツ [表示]

  1. 1jQueryで複数箇所をreplaceで文字列置換したい
  2. 2jQueryで複数箇所をreplaceで文字列置換する方法
  3. 2.1複数の要素内で該当する文字列をすべて置換する方法
  4. 2.2複数の文字列を一括置換する方法
  5. 3まとめ

jQueryで複数箇所をreplaceで文字列置換したい

jQueryで1箇所だけではなく、複数箇所をまとめてreplaceで文字列置換したいという場合がよくあります。

その方法について以降の項目にて解説します。

Photo byPexels

jQueryで複数箇所をreplaceで文字列置換する方法

まずシンプルにjQueryでテキストの複数箇所をreplaceで置き換えする方法について紹介します。

テキストの複数箇所をreplaceするには、/replaceしたいもの/gというように記述します。

ではサンプルコードを用意したので確認してみましょう。

このようにHTML内で記述した全ての「野球」という文字が「サッカー」に置き換わっていることが分かります。

複数の要素内で該当する文字列をすべて置換する方法

複数の要素内で該当する文字列をすべて置き換えるには.each()メソッドを用います。

ではサンプルコードを用意したので確認してみましょう。

このように複数の要素内で該当する「野球」というテキストが全て「サッカー」に置き換わっていることが分かります。

複数の文字列を一括置換する方法

置き換えたいテキストが複数ある場合以下の2つの方法にてreplaceします。

メソッドチェーンを用いる

まず1つめとしてメソッドチェーンを用います。

ではサンプルコードで確認してみましょう。

このように「野球」が「バスケットボール」に、「サッカー」が「バレーボール」に置き換わっていることが分かります。

配列とfor文を用いる

2つめとして配列にそれぞれ置き換えたいテキスト、置き換えるテキストを格納して、for文にて記述する方法があります。

ではサンプルコードで確認してみましょう。

上記のように配列とfor文を用いて記述することで、複数の文字列を一括置換できていることが分かります。

まとめ

いかがでしたでしょうか?

ぜひここで紹介した方法を用いて複数箇所をreplaceで文字列置換してみて下さい。

GeekHive採用サイト

関連記事