jQueryでの文字列の置き換え【現役エンジニアが解説】

PROGRAM

今回は、jQueryでの文字列の置き換えについて、簡単に解説していきます。

replaceメソッド

例えば、以下のHTMLを想定します。

<div id="app">This is Hoge. Hoge is this.</div>

JavaScriptのreplaceメソッドで以下のように文字列の置き換えができます。

var text = $('#app').text();
$('#app').text(text.replace("Hoge", "Foo"));

最初の一つだけでなく、全て置き換えたい場合には、以下のように正規表現を使います。

var text = $('#app').text();
$('#app').text(text.replace(/Hoge/g, "Foo"));

replaceAllメソッド

jQueryにはreplaceAllメソッドがあります。

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>みかん</li>
</ul>

ここで例として上記のHTMLを想定してみます。

$('<li>いちご</li>').replaceAll('li:eq(1)');

replaceAllメソッドを使うことで、上記のように要素ごと置き換えることができます。

replaceWithメソッド

jQueryにはreplaceWithメソッドもあります。

これはreplaceAllメソッドと指定の仕方が反対になるだけです。

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>みかん</li>
</ul>

上記のHTMLがあるとして、以下のように指定することで置き換えを行うことができます。

$('li:eq(1)').replaceWith('<li>いちご</li>');