jQueryでreplaceを使って複数箇所の複数の文字列を一括置換する方法

jQueryでreplaceを使って、HTMLページ内の文字列を別の文字列に置き換えることができます。

CMS等のプログラム中で定義されている文字列を別の文字列に置き換えたいときや、たくさんの文字修正があったときなどに便利です。

基本的な使い方から段階をふんで、最終的に「複数箇所の複数の文字列を一括置換する」という動作になるようにしてみようと思います。途中の解説が不要な方は、ページの下までワープしてください。

一つの要素内の該当する文字列を一箇所だけ置換

一つの要素内の、最初にマッチした文字列を一箇所だけを指定した文字列に置き換えます。

一つの要素内の該当する文字列をすべて置換

一つの要素内の、マッチした文字列が複数箇所あった場合、全部を指定した文字列に置き換えます。

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

複数の要素にわたって置き換えしたい場合は以下のように「each」を使います。

メソッドチェーンで複数の文字列を一括置換

「replace」をメソッドチェーンにすると、複数文字列の置換が可能になります。「.」でつないでいくだけです。

配列とfor文で複数の文字列を一括置換

置換したい文字がたくさんあるときは、配列とfor文を使うとコードが少しすっきりします。もちろんメソッドチェーンを使っても問題ありませんが。

オブジェクト（連想配列※）と$.eachで複数の文字列を一括置換

ちょっと無理やりな感はありますが、オブジェクトと$.each関数を使っても同じような事ができます。

keyに「//g」は使えませんので、keyとvalueを入れ替えてみました。

javascriptでは「連想配列」という表現は使わないようです。