classList.replace should replace all classes xxx1yyy with xxxyyy

Question

i tried to replace a class. found this working example: javascript: replace classList that is into a conditional

my modification (visible below) don't work.

classList.replace should replace all classes xxx1yyy with xxxyyy

means i need replace all classes like my1bla, mu1bla, my1hu, …1… and more to mybla, mubla, myhu, …

<!DOCTYPE html>
<html>
<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="my1bla">
I am a DIV element
</div>

<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.classList.contains("1")) {
    x.classList.replace("1", "");
} else if (x.classList.contains("1")) {
    x.classList.replace("1", "");
}
}
</script>

`classList.replace("xxx1yyy", "xxxyyy")` It replaces one class with another. It's not like String.replace. — James, Sep 27 '22 at 17:01

score 2 · Answer 1 · answered Sep 27 '22 at 16:59

2

You cant change it by a single word. .contains returns true or false & .replace will replace the whole className

<!DOCTYPE html>
<html>
<style>
  .my1bla {
    background-color: black;
  }
  
  .mybla {
    background-color: blue;
  }
</style>
<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.classList.contains("my1bla")) {
      x.classList.replace("my1bla", "mybla");
    } else if (x.classList.contains("my1bla")) {
      x.classList.replace("my1bla", "mybla");
    }
  }
</script>

answered Sep 27 '22 at 16:59

UmairFarooq

1,269
1
3
8

1

Also, the conditional needs correcting to have the intended effect. Currently it looks for the same condition on each check. – offoffoff Sep 27 '22 at 17:06
@offoffoff yes,true – UmairFarooq Sep 27 '22 at 17:09
but i need replace many classes like my1bla mu1bla my1hu and more to mybla mubla myhu. how could i do this then? – SL5net Sep 27 '22 at 17:10
1

you will have to use condition for Each – UmairFarooq Sep 27 '22 at 17:13
even if had 3 or more classes to replace. if would hardly be 3 more lines of code. I don't see how this is an issue – UmairFarooq Sep 27 '22 at 17:23
yes @UmairFarooq here using `each` with regEx-Support over the complete DOM https://stackoverflow.com/a/73876794/2891692 – SL5net Sep 28 '22 at 06:17

score 2 · Accepted Answer · answered Sep 27 '22 at 18:05

2

Try this:

function myFunction() {
  var x = document.getElementById("myDIV");

  x.classList.value = x.classList.value.replace("1", "");
}

https://jsfiddle.net/3brfgLnd/1/

answered Sep 27 '22 at 18:05

Dimitris Maragkos

8,932
2
8
26

1

Your solution with regEx-Support over the complete DOM : https://stackoverflow.com/a/73876794/2891692 – SL5net Sep 28 '22 at 06:14

score 1 · Answer 3 · answered Sep 27 '22 at 17:03

1

You can use Element.classList.toggle

function myFunction() {
  const x = document.getElementById("myDIV")

  x.classList.toggle('my1bla')
  x.classList.toggle('mybla')
}

.my1bla {
  background-color: black;
}

.mybla {
  background-color: blue;
}

<p>Click button to change b style class from DIV. background-color will change from black to blue (hopefully)</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<script>
</script>

answered Sep 27 '22 at 17:03

kennarddh

2,186
2
6
21

i need replace many classes like my1bla mu1bla my1hu and more to mybla mubla myhu. – SL5net Sep 27 '22 at 17:11
@SL5net Do you mean, you need to change `my1bla` to `mu1bla` and `mybla` to `mubla`? – kennarddh Sep 27 '22 at 17:13
no. means i need replace all classes like my1bla, mu1bla, my1hu, …1… and more to mybla, mubla, myhu, … – SL5net Sep 27 '22 at 17:17
@SL5net So you need to remove character `1` in the middle of class? – kennarddh Sep 27 '22 at 17:28

score 1 · Answer 4 · answered Sep 27 '22 at 18:37

You can do this using data attributes fairly easily. You alter the string of the data-class attribute and then set it again to the dataset.

const button = document.querySelector("button");
const boxes = document.querySelectorAll(".box");
let initial = true;
const checkClasses = () => {
  boxes.forEach(box => {
    let dataClass = box.dataset.class;
    if (initial) {
      let dataClass = box.dataset.class.split("1").join("");
      box.setAttribute('data-class', dataClass);
    }
  });
}
button.addEventListener("click", checkClasses);

body {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

div {
  height: 100px;
}

[data-class="my1blue"] {
  background: royalblue;
}

[data-class="myblue"] {
  background: blue;
}

[data-class="my1red"] {
  background: tomato;
}

[data-class="myred"] {
  background: red;
}

[data-class="my1green"] {
  background: olive;
}

[data-class="mygreen"] {
  background: green;
}

button {
  margin: 1rem;
}

<div data-class="my1blue" class="box"></div>
<div data-class="my1red" class="box"></div>
<div data-class="my1green" class="box"></div>

<button>click me</button>

is it possible to loop through the complete page? like: `const all = document.querySelectorAll("html");` or `const all = document.querySelectorAll("");` ? or `const all = document.querySelectorAll("*");` — SL5net, Sep 27 '22 at 18:45
Sure, you could check all divs that have the data-class attribute. `const elems = document.querySelectorAll('[data-class]');` Not sure what the use case is for checking the entire DOM like you're saying. — offoffoff, Sep 27 '22 at 19:19
yes possible. i found here how: https://stackoverflow.com/a/12823730/2891692 . Use Case is to change all classes that are light mode with dark mode . because there is a significant word in the middle of the class name. — SL5net, Sep 27 '22 at 19:24

score 1 · Answer 5 · answered Sep 27 '22 at 19:25

If it is always going to be 1, you can use a contains for the selector so you do not have to loop over every element in the DOM

document.querySelectorAll("[class*='1']").forEach(elem => elem.classList.value = elem.classList.value.replace(/1/, ''));

.my1bla {
  background-color: black;
}

.mybla {
  background-color: blue;
}

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

<div id="myDIV" class="my1bla">
  I am a DIV element
</div>

score 0 · Answer 6 · answered Sep 27 '22 at 19:17

Based on the previous answers, I was able to come up with the following comprehensive solution:

<style>
.my1bla {
background-color: black;
}
.mybla {
background-color: blue;
}
</style>

<button onclick="myFunction()">change style class from DIV</button>
<div class="my1bla">I am a DIV element</div>

<script>
function myFunction() {
  var elems = document.body.getElementsByTagName("*");
for (i in elems) {
    ele = elems[i];
    if(ele.classList)
        ele.classList.value = ele.classList.value.replace("1", "");
};
}
</script>

classList.replace should replace all classes xxx1yyy with xxxyyy

6 Answers6