こちらではjQueryのメソッドのうち、要素を置換するメソッドについて解説しています。
jQueryの要素を置換するメソッド一覧
メソッド | 解説 |
---|---|
replaceWith(conent) | 要素をconentに置換する。 |
replaceAll(selector) | selectorを要素に置換する。A.replaceWith(B)とB.replaceAll(A)が同じ動作。 |
replaceWith(conent)
選択している全ての要素をconentに置換するメソッドです。
replaceWith(conent)の使い方
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
上記のHTMLにおいて
$('li').replaceWith('<li>ぶどう</li>');
とすると
<ul>
<li>ぶどう</li>
<li>ぶどう</li>
<li>ぶどう</li>
</ul>
のようになります。
3つある<li>
が全て置換されます。
replaceWith(function)の使い方
replaceWith()は引数に関数を渡すこともできます。
関数を引数とした場合は、選択した要素を関数の返り値で置換します。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
先ほどと同じHTMLにおいて次のJavaScriptを実行してみます。
$('li').replaceWith(function(){
return "<li>" + $(this).text() + "とぶどう</li>";
});
引数のfunction
は、元の文字列に「とぶどう」という文字列を追加して返す関数です。
結果は
<ul>
<li>りんごとぶどう</li>
<li>みかんとぶどう</li>
<li>メロンとぶどう</li>
</ul>
のようになります。
replaceAll(selector)
指定した要素で、selectorにマッチした要素を置換するメソッドです。
replaceWith(content)と似た動作をしますが、構文における要素の位置が逆になっています
A.replaceWith(B)とB.replaceAll(A)が同じ動作をします。
replaceAll(selector)の使い方
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
上記のHTMLにおいて
$('<li>ぶどう</li>').replaceAll('li');
とすると
<ul>
<li>ぶどう</li>
<li>ぶどう</li>
<li>ぶどう</li>
</ul>
のようになります。
replace()について
JavaScriptにはreplace()というメソッドもあります。replace()はjQueryではありません。
replace()では正規表現を使って文字列を置換することができます。
例えば、CSVファイルで住所データが,
で区切られているとします。
福岡県,福岡市,西区
このようなデータを結合して1つの文字列にまとめるために、下のJavaScriptを実行してみます。
var str = "福岡県,福岡市,西区";
var new_str = str.replace(/,/g , '');
console.log(new_str);
文字列str
は,
で区切られていますが、正規表現で置換することで,
を取り除き住所データを結合することができます。
実行した結果は
福岡県福岡市西区
のようになります。
[prism]