CODEWITHSUNDEEP
javascriptregex
Michael Lambertz
Michael Lambertz

Reputation: 21

Javascript RegExp unknown repeated matches

It's difficult to describe because I'm not an expert with regular expressions. So I tell you my case.

In HTML want to contribute class attributes into different data-xyz attributes. The problem is to get always all classes per match. For example the following HTML:

<span class="note-123 index-3 green">Hello</span> <span class="index-456 red">World<span>

Until now my regular expression is /<span class="([^\"\s]*)\s*/ and it matches the first class. In this case note-123 and index-456

But if I want to get all classes per element I could use /<span class="([^\"\s]*)\s*([^\"\s]*)\s*([^\"\s]*)\s*/. That works until three classes and the result for the second class return index-456, red and an empty string.

Is there a possibility to always get all classes per match no matter how many classes there are? Similar to a nested loop in Javascript?

I would be pleased to get any help from you guys.

Upvotes: 0

Views: 52

Answers (2)

The fourth bird
The fourth bird

Reputation: 163457

You could get the classes without using a regex making use of querySelectorAll to find the elements that you want and use classList to get the class names.

Then use for example the add or remove methods.

Or use a DOMParser.

Note to close the last span.

let elms = document.querySelectorAll("span");
elms.forEach(e => {
  for (let value of e.classList.values()) {
    console.log(value);
  }
});
<span class="note-123 index-3 green">Hello</span> <span class="index-456 red">World</span>

Upvotes: 1

collapsar
collapsar

Reputation: 17238

Use the regex to extract the value of the class attribute and split it at whitespace sequences:

let as_classes
  , as_matches
  , n_i
  , re_classes
  , s_test
  ;

  re_classes = new RegExp ( "<span class=\u0022([^\\u0022]*)", "g" );
  s_test = '<span class="note-123 index-3 green">Hello</span> <span class="index-456 red">World<span>';
  n_i=0;
  while ((as_matches = re_classes.exec(s_test)) !== null) {
     n_i++;   
     s_classes = as_matches[1];
     as_classes = s_classes.split(/[\s]+/g);
     
     console.log(`match #${n_i}, classes: ${JSON.stringify(as_classes)}.`);
  }

Warning

It is in general never a good approach to extract information from html with regexen.

Upvotes: 0

Related Questions