jquery replace part of a class name with pattern

Question

I select all classes by class that begins with photo-. Replace part of class name by pattern. I need to replace photo-gallery-RID459852 with photo-gallery. Note: the part -RID[0-9] is replaced by ""

$("#Master [class*='photo-']").replace(function(index, css) {
  return (css.match(/(^|\s)-RID\S+/g) || []).join(' ');
}, "");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="Master">
  <div class="photo-gallery-RID459852 other any some">
    Algo
  </div>
  <div class="photo-gallery-RID987410 other any some2 other2"></div>
  <div>
    <div>
      <div class="photo-gallery-369841 other any some"></div>
    </div>
  </div>
  <article>
    <div class="photo-gallery-RID36541 here now other any some"></div>
  </article>
</main>

My jsFiddle: https://jsfiddle.net/ngqku78p/

Please see the console error. You cannot code by wishful thinking. Look in the jQuery documentation how such things work. You need a .each() — mplungjan
– mplungjan, Commented Sep 19, 2019 at 13:07

Rory McCrossan · Accepted Answer · 2019-09-19 13:18:21Z

3

Your current code doesn't work as jQuery objects do not have a replace() method.

To achieve the output you require you could loop over every class on the element and remove the RIDXXX from it's name. To do that you can use the classList collection along with the replace() method, like this:

$("#Master [class*='photo-']").each(function(i, el) {
  el.classList.forEach(function(className) {
    el.classList.replace(className, className.replace(/\-RID\d+/g, ''));
  });
});

.photo-gallery {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="Master">
  <div class="photo-gallery-RID459852 other any some">Algo</div>
  <div class="photo-gallery-RID987410 other any some2 other2">Lorem</div>
  <div>
    <div>
      <div class="photo-gallery-369841 other any some">ipsum</div>
    </div>
  </div>
  <article>
    <div class="photo-gallery-RID36541 here now other any some">dolor</div>
  </article>
</main>

edited Sep 19, 2019 at 13:18

answered Sep 19, 2019 at 13:12

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Renato Ramos Over a year ago

Genius, perfect solution. I did not know that this function did not exist in jQuery, well when you write code between javascript and jQuery you confuse everything, when you are in a hurry.

mplungjan · Accepted Answer · 2019-09-19 13:22:47Z

2

Perhaps you meant this?

You could loop over the classList but this works for your examples too

$("#Master [class*='photo-']").each(function() {
  console.log("Before", this.className)
  this.className = this.className.replace(/photo-gallery-RID.*? /g, "photo-gallery ");
  console.log("After ", this.className)
});

.photo-gallery {
  font-weight: bold;
}

.other {
  font-style: italic;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="Master">
  <div class="photo-gallery-RID459852 other any some">
    Algo
  </div>
  <div class="photo-gallery-RID987410 other any some2 other2">RID987410</div>
  <div>
    <div>
      <div class="photo-gallery-369841 other any some">369841</div>
    </div>
  </div>
  <article>
    <div class="photo-gallery-RID36541 here now other any some">RID36541</div>
  </article>
</main>

edited Sep 19, 2019 at 13:22

answered Sep 19, 2019 at 13:13

mplungjan

180k29 gold badges183 silver badges246 bronze badges

4 Comments

Rory McCrossan Over a year ago

Much better than mine. Not even sure why I put the loop in there.

mplungjan Over a year ago

Hmm, I liked yours since it does not add a spurious space if there are no other classes

Rory McCrossan Over a year ago

True. I guess both have their benefits depending on the exact use case.

Renato Ramos Over a year ago

Thank you both for your solution.

Collectives™ on Stack Overflow

jquery replace part of a class name with pattern

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related