replace class name using regular expression

Question

I'm trying to use classList.replace() with regular expression. My goal is replacing an expression like badge-something with an other value like badge-success.

I've tried this:

element.classList.replace(/badge-*/i, 'badge-success')

But it returns false and doesn't change nothing. What am I missing?

@Clive no classList is a list and as it returns false it'd put className as false not as badge-success. — Emilio Conte
– Emilio Conte, Commented Jul 6, 2019 at 13:27

melpomene · Accepted Answer · 2019-07-06 13:26:54Z

6

Element.classList is a DOMTokenList (not a string).

DOMTokenList.replace takes two strings, not a regex. The first argument is the exact class name you want to replace. Patterns are not supported.

If you want to use regexes, you need a string:

element.className = element.className.replace(/(^|\s)badge-\S+/g, '$1badge-success');

answered Jul 6, 2019 at 13:26

melpomene

86.2k8 gold badges96 silver badges154 bronze badges

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

Comments

Rajesh Kumar · Accepted Answer · 2019-07-06 13:35:56Z

0

classList.replace took string as an argument, so i think that is why it is not working. But you can achieve your goal by twisting your code little bit, repeat these steps

first took all className of that element(using element.className)
split those classes in array (using split function--- classname.split(' '))
apply forEach loop on array and by using str.search('badge-') > -1, replace that className using element.classList.replace..........Simple little long but code will work definitly

. Thank you

answered Jul 6, 2019 at 13:35

Rajesh Kumar

516 bronze badges

Collectives™ on Stack Overflow

replace class name using regular expression

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related