Javascript RegExp unknown repeated matches

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.

The fourth bird · Answer 1 · 2020-04-30T14:36:25.767

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>

edited Apr 30 '20 at 14:36

answered Apr 30 '20 at 13:07

The fourth bird

154,723
16
55
70

Okay that seem to work. Another way I often do is with jQuery but it is unnecessary if I knew all these commands. Think RegExp is a lot faster if I want to prapare a lot of very long documents. – Michael Lambertz Apr 30 '20 at 14:16
@MichaelLambertz Why do you want to make it more complicated and error prone? See https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags – The fourth bird Apr 30 '20 at 14:20
1

@MichaelLambertz Why do you think RegEx will be faster? – The fourth bird Apr 30 '20 at 14:36
It's the fastest way to search in text and manipulate text, isn't it? – Michael Lambertz May 04 '20 at 13:20
@MichaelLambertz I think that using a regex is slower, but I must say that to be sure you would have to benchmark it. But using a DOMparser has a great benefit, so you might as well take advantage of it. – The fourth bird May 04 '20 at 13:22

collapsar · Answer 2 · 2020-04-30T13:52:09.780

0

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.

edited Apr 30 '20 at 13:52

answered Apr 30 '20 at 10:32

collapsar

17,010
4
35
61

Thank you. Now it works for the first item. But how can I find the second match classes ["index-456", "red"]. And I want to replace the matches throughout the code. If it's never a good approach, how would you do it? – Michael Lambertz Apr 30 '20 at 11:47
I've updated the answer with code to cater for repeated matches. As for an alternative approach, instead of matching against regexen query the dom (the in-browser representation of html files; check out [the introduction on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)) or parse the html. with a parsing library or using a framework/library that comes with such facilities (like jquery). What is best depends on where the code executes (client/server) and the your task in-the-large. – collapsar Apr 30 '20 at 13:58
Thank you so much! Thanks too for the link and the hint. I often use jquery but I think regexp is much faster than everything else :-/ – Michael Lambertz Apr 30 '20 at 14:13
When it comes to code writing, factor in the time needed for maintaining your software. Performance-wise, you may interact with the DOM through the DOM API, namely the [`classList` property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). Of course, this requires that the DOM is available in the first place. – collapsar Apr 30 '20 at 14:23

Javascript RegExp unknown repeated matches

2 Answers2