DOMTokenList: replace() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

The replace() method of the DOMTokenList interface replaces an existing token with a new token. If the first token doesn't exist, replace() returns false immediately, without adding the new token to the token list.

Syntax

js
replace(oldToken, newToken)

Parameters

oldToken

A string representing the token you want to replace.

newToken

A string representing the token you want to replace oldToken with.

Return value

A boolean value, which is true if oldToken was successfully replaced, or false if not.

Examples

In the following example we retrieve the list of classes set on a <span> element as a DOMTokenList using Element.classList. We then replace a token in the list, and write the list into the <span>'s Node.textContent.

First, the HTML:

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

Now the JavaScript:

js
const span = document.querySelector("span");
const classes = span.classList;

const result = classes.replace("c", "z");

span.textContent = result ? classes : "token not replaced successfully";

The output looks like this:

Specifications

Specification
DOM
# ref-for-dom-domtokenlist-replace①

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
replace
Chrome – Full support
Chrome 61 (Release date: 2017-09-05)
footnote Full support
Edge – Full support
Edge 17 (Release date: 2018-04-30)
footnote Full support
Firefox – Full support
Firefox 49 (Release date: 2016-09-20)
footnote Full support
Opera – Full support
Opera 48 (Release date: 2017-09-27)
footnote Full support
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 61 (Release date: 2017-09-05)
footnote Full support
Firefox for Android – Full support
Firefox for Android 49 (Release date: 2016-09-20)
footnote Full support
Opera Android – Full support
Opera Android 45 (Release date: 2018-02-15)
footnote Full support
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 8 (Release date: 2018-07-18)
footnote Full support
WebView Android – Full support
WebView Android 61 (Release date: 2017-09-05)
footnote Full support
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
return()'s value is a boolean, not void as it used to be.
Chrome – Full support
Chrome 67 (Release date: 2018-05-29)
footnote Full support
Edge – Full support
Edge 18 (Release date: 2018-10-02)
footnote Full support
Firefox – Full support
Firefox 61 (Release date: 2018-06-26)
footnote Full support
Opera – Full support
Opera 54 (Release date: 2018-06-28)
footnote Full support
Safari – Full support
Safari 12 (Release date: 2018-09-17)
footnote Full support
Chrome Android – Full support
Chrome Android 67 (Release date: 2018-05-31)
footnote Full support
Firefox for Android – Full support
Firefox for Android 61 (Release date: 2018-06-26)
footnote Full support
Opera Android – Full support
Opera Android 48 (Release date: 2018-11-08)
footnote Full support
Safari on iOS – Full support
Safari on iOS 12 (Release date: 2018-09-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 9 (Release date: 2018-09-15)
footnote Full support
WebView Android – Full support
WebView Android 67 (Release date: 2018-05-31)
footnote Full support
WebView on iOS – Full support
WebView on iOS 12 (Release date: 2018-09-17)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support