Javascript RegExp 未知重复匹配

Question

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.

Answer 1

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>

Answer 2

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="([^\"]*)", "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 isin generalnever a good approach to extract information from html with regexen.