-1

I want to execute JavaScript that finds all elements on a page that contains some text in it's class name and change the class names.

For example, let's say I have the following elements:

<div class="blue selector">...</div>
<div class="green selector">...</div>
<div class="red selector">...</div>
<div class="button">...</div>

Let's say I want to find all the elements that contain the word "selector" in their class names and change the class names of that element to "picker", so that I finally have:

<div class="picker">...</div>
<div class="picker">...</div>
<div class="picker">...</div>
<div class="button">...</div>

What JavaScript can I execute on the page to get this result?

Cornel Verster
  • 1,664
  • 3
  • 27
  • 55
  • What part are you struggling with? [Getting elements by class name?](https://stackoverflow.com/questions/3808808/how-to-get-element-by-class-in-javascript) [Removing a class from elements?](https://stackoverflow.com/questions/22270664/how-to-remove-a-class-from-elements-in-pure-javascript) [Adding a class to elements?](https://stackoverflow.com/questions/507138/how-to-add-a-class-to-a-given-element) – Robby Cornelissen Jun 03 '22 at 04:47

1 Answers1

1

You can use Substring matching attribute selectors and change the class name of elements.

document.querySelectorAll('div[class*="selector"]').forEach(node=> node.className = "picker");
Shikhar Awasthi
  • 1,172
  • 1
  • 3
  • 13