jQuery replace() メソッド

この投稿では、すべての目標の詳細を一致した要素に置き換えた後に新しい文字列を返す jQuery 置換機能について説明します。 このアプローチは、文または文字列のグループ内の任意の文字列の出現を置き換えるために使用できます。

replace() アプローチで変更できるのは、主要な例だけです。 すべての出現を削除するには、グローバル修飾子 (g) を使用する必要があります。

jQuery の replace()

jQuery は、DOM の管理に役立ついくつかの機能を提供します。そのうちの 1つが DOM の置き換えと見なされます。 jQuery の replace() アプローチを使用して、文字列または文字列のコレクション内の文字列内の選択された部分文字列の出現箇所をすべて見つけて置換します。

jQuery はさらに、replace 機能を使用して DOM を操作するための replaceAll() および replaceWith() メソッドを提供します。

replaceAll() メソッドは、各ターゲット要素を一致した要素のセットに置き換えます。 replaceWith() メソッドは、各要素を提供された新しいコンテンツに置き換え、削除された要素セットを返します。

構文：

string.replace (/[oldString]/+/g, 'newString')
$(content).replaceAll(selector)
$(selector).replaceWith(content, function(i))

1. content は、挿入するコンテンツを指定する必須パラメータです。可能な値は、HTML 要素、jQuery オブジェクト、および HTML 要素です。
2. function(i) は、置き換えられるコンテンツを返す関数を指定するオプションのパラメーターです。

次の簡単な例でそれを理解しましょう。

<p>Welcome to jQuery!</p>
<button >
Change
</button>

$(document).ready(function() {
  $('button').on('click', () => {
    $('p').text((index, text) => {
      return text.replace(/jQuery/g, 'Delftstack');
    });
  })
});

上記の例では、jQuery replace() メソッドは、指定された文字列値 jQuery を検索し、指定された replace 値 Delftstack を返します。

上記のコード スニペットを、jQuery をサポートするブラウザーで実行してみてください。結果が表示されます。

replace() の前:

replace() の後:

デモ