-1

I want to get multiple variable from a string using javascript.

String example:

<span var1="abc" some random thing var2="cde" another random stuff var3="efg"></span>
<span var1="abc" some random thing var2="cde" another random stuff??>
<::" var3="efg"></span>

I want to get var1, var2 and var3.

The closest I can get using this regex only for the first group.

span var1="(.*?)"(?:.*)var2="(.*?)"(?:.*)var3="(.*?)"(?:.*)\/span

Here is the example: Example

Thank you!

fredmaggiowski
  • 2,232
  • 3
  • 25
  • 44
Caal Saal VI
  • 192
  • 2
  • 12
  • If I understood clearly what you want, you're trying to use regex over HTML? please read [this topic](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags). – fredmaggiowski Apr 25 '16 at 16:19

3 Answers3

0

Am I missing something? Your code works for me.

See the example below:

var str = '<span var1="abc" some random thing var2="cde" another random stuf var3="efg"></span><span var1="abc" some random thing var2="cde" another random stuf??><::" var3="efg"></span>';

var re = /<span var1=["'](.*?)["'](?:.*)var2=["'](.*?)["'](?:.*)var3=["'](.*?)["'](?:.*)\/span>/;

var matches = re.exec(str).slice(1);

matches.forEach(function(match) {
  document.body.insertAdjacentHTML('beforeend', match + '<br>');
});
timolawl
  • 5,434
  • 13
  • 29
0

What you need is the exec method of the regex. It allows you to repeatedly get submatches, continuing at the position after the last match.

What I did:

  • I used regex.exec instead of string.match
  • I added g to make the regex global
  • I changed (?:.*) to .*? because it would be too greedy and eat all the content in the middle

Now it works (jQuery just for simple visualization of the output):

var str = '<span var1="abc" some random thing var2="cde" another random stuf var3="efg"></span><span var1="abc" some random thing var2="cde" another random stuf??><::" var3="efg"></span>';

// Note that I added "g" to make it a global selector and changed all (?:.*) to .*?
var re = /<span var1="(.*?)".*?var2="(.*?)".*?var3="(.*?)".*?\/span>/g;

var matches;
// You can call re.exec repeatedly and it will return always the next group of results
while(matches = re.exec(str)) {
    // matches will look like this: ["<span var1="abc" some random thing var2="cde" another random stuf var3="efg"></span>", "abc", "cde", "efg", index: 0, input: "<span var1="abc" some random thing var2="cde" anot…de" another random stuf??><::" var3="efg"></span>"]

    // This is just for nice output
    $("<span/>").text(matches[0]).appendTo("body");
    $("<ul/>").append(matches.slice(1).map(function(m) {
        return $("<li/>").text(m);
    })).appendTo("body");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you want to be a bit less "stiff" and just look for anything which looks like an HTML attribute with quotes, you could use this regex instead: /\s([\w-]+)="(.*?)"/g.

CherryDT
  • 25,571
  • 5
  • 49
  • 74
0

EDIT Please see REGEX 101 DEMO. You could try:

function getVars(str) {
  var reg = /var1="(.*?)".*?\n*.*?var2="(.*?)".*?\n*.*?var3="(.*?)"/g;
  while (found = reg.exec(str)) {
    document.write ("var1 = " + found[1] + "<br>var2 = " + found[2] + "<br>var3 = " + found[3] + "<br>" );
  }
}

var str = '<span var1="abc" some random thing var2="cde" another random stuff var3="efg"></span>\n' + 
'<span var1="abc" some random thing var2="cde" another random stuff??>\n' +
'<::" var3="efg"></span>';
getVars(str);
Quinn
  • 4,394
  • 2
  • 21
  • 19