DOMTokenList.replace()

replace()DOMTokenList インターフェイスのメソッドで、既存のトークンを新しいトークンで置き換えます。最初のトークンが存在しない場合、 replace() はすぐに false を返し、トークンリストに新しいトークンを追加しません。

構文

tokenList.replace(oldToken, newToken);

引数

oldToken
DOMString で、置き換えたいトークンを表します。
newToken
DOMString で、 oldToken を置き換えたいトークンを表します。

返値

論理値で、 trueoldToken の置き換えに成功した場合で、 false はそれ以外の場合です。

: 古いブラウザーでは、 replace() は void を返します。

以下の例では、 <span> 要素に設定されたクラスのリストを DOMTokenList として受け取るのに Element.classList を使用しています。それからリスト内のトークンを置き換え、リストを <span>Node.textContent に書き込みます。

最初に HTML です。

<span class="a b c"></span>

そして JavaScript です。

let span = document.querySelector("span");
let classes = span.classList;

let result = classes.replace("c", "z");
console.log(result);

if (result) {
  span.textContent = classes;
} else {
  span.textContent = 'token not replaced successfully';
}

出力結果は以下のようになります。

ポリフィル

次のポリフィルは DOMTokenList クラスに replace メソッドを追加します。次のコードは IE10-11 でのみ動作します。もっと古いバージョンの IE で使用するには、 element.classList#Polyfill のポリフィルを参照してください。

DOMTokenList.prototype.replace = function (a, b) {
    if (this.contains(a)) {
        this.add(b);
        this.remove(a);
        return true;
    }
    return false;
}

仕様書

仕様書 状態 備考
DOM
replace() の定義
現行の標準 初回定義

ブラウザーの互換性

BCD tables only load in the browser