remove spaces from matched pattern in regex js

Question

I am removing classes from a HTML element according to some conditions. This is my regex pattern:

elem.className = elem.className.replace(/shake|progress|done/g, '');

but this pattern has a problem that if somebody adds another class say shaker, that will also be removed. so I changed the pattern to:

elem.className = elem.className.replace(/(^|\s)shake(\s|$)|(^|\s)progress(\s|$)|(^|\s)done(\s|$)/g, '');

now it removes only if the whole word matches. but now it removes the spaces around the word. I am not sure how to fix this issue. please help me with this.

This is not a job for regex. Interact with classList instead. — Derek 朕會功夫
– Derek 朕會功夫, Commented May 3, 2017 at 6:11
Can you give an accurate example of before and after, meaning string before and after regex applied — StudioTime
– StudioTime, Commented May 3, 2017 at 6:12
Derek has the right answer; but the technique to match whole words only with regexes might be worth mentioning anyway: Take a look at word boundary anchors. — Tim Pietzcker
– Tim Pietzcker, Commented May 3, 2017 at 6:15
For your regex question, use word boundaries: /\b(?:shake|progress|done)\b/ — Toto
– Toto, Commented May 3, 2017 at 8:55

Derek 朕會功夫 · Accepted Answer · 2017-05-03 06:13:02Z

3

This is not a job for regex. Interact with classList instead.

elem.classList.remove("shake", "progress", "done"); // removes all 3 class values

answered May 3, 2017 at 6:13

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

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

1 Comment

Bharat Soni Over a year ago

Thanks, that will work. But, maybe in some other case where I need to match the whole word. what should be the regex pattern.

Frank Wisniewski · Accepted Answer · 2017-05-03 06:27:47Z

0

classList.remove is the best way.

This answers your question:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="tt" class="eins zwei drei meins">ABC</div>
</body>
  <script>
    tt.className=tt.className.replace(/\beins|zwei|drei/g, '');
  </script>

</html>

answered May 3, 2017 at 6:27

Frank Wisniewski

1,2349 silver badges7 bronze badges

Comments

Rob M. · Accepted Answer · 2017-05-03 06:35:08Z

0

I agree with others that classList is the way to go here, however you could accomplish this if you want to match whole words. Split className on space and filter any items that are in your list of classes to remove:

const classes = elem.className.split(' ');
const remove = ['shake', 'progress', 'done'];

elem.className = classes.filter(cls => !remove.includes(cls)).join(' ');

answered May 3, 2017 at 6:35

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Collectives™ on Stack Overflow

remove spaces from matched pattern in regex js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related