Regex is only showing one result how can I get it to show the rest of the results in JavaScript

Question

I been looking for a while on google and on here and I can't find a post that is very helpful so I have this script that gets each class name id value and put it in a variable call strtext so later I use regex

to output the value of the var output but I'm noticing it is only showing the var output result as one match which is showing just

a

so how can I get the regex section to show the rest of the matches. I'm referring to this

document.querySelector('#output-2').innerHTML= output;

Here is my code

var names= document.querySelectorAll('.name');

var text = new Array();
var strtext = '';
 
for (var i = 0; i < names.length; i++){
var arlength = text.length;
text[arlength] = '['+names[i].getAttribute('id')+']';
}
strtext = text.join(' and ');
document.querySelector('#output-1').innerHTML= strtext;

//Show all the regex matches
var string= strtext;
var pattern= /\[(.*?)\]/ig;
var match = pattern.exec(string);
var output= match[1];
document.querySelector('#output-2').innerHTML= output;

<p id='a' class='name'>Adam</p>
<p id='b' class='name'>Bob</p>
<p id='c' class='name'>Cane</p>
<p id='d' class='name'>Dan</p>
<p id='e' class='name'>Ed</p>
<p id='f' class='name'>Fred</p>
<p id='g' class='name'>Gene</p>

<p id='output-1'></p>
<p id='output-2'></p>

Poul Bak · Accepted Answer · 2018-11-19T08:25:28.670

1

You need to call 'pattern.exec' multiple times, as long as it succeeds, like this:

var output = "";
var match = pattern.exec(string);
while (match !== null && match.length)
{
    output += match[1];
    match = pattern.exec(string);
}
document.querySelector('#output-2').innerHTML = output;

This should get you all results.

edited Nov 19 '18 at 08:25

answered Nov 18 '18 at 11:00

Poul Bak

10,450
5
32
57

Thank you so much for your reply but sadly there is an error with your suggestion this is what is says Uncaught SyntaxError: Unexpected token var it is referencing to this while (var match = pattern.exec(string) !== null) This is what I put //Show all the regex matches var string= strtext; var pattern= /\[(.*?)\]/ig; var output = ""; while (var match = pattern.exec(string) !== null) { output += match[1]; } document.querySelector('#output-2').innerHTML = output; – Nov 18 '18 at 22:03
I have made a small edit, hope it Works now. – Poul Bak Nov 19 '18 at 08:07

score 0 · Answer 2 · answered Nov 18 '18 at 11:11

If you can depend on the names being name-like (and not having, for example, square brackets in them), then you can get all results at once with a regular expression match, for non-bracket characters, with lookahead for a ].

You can also use dot notation to access the id of an element, which is a lot easier than using getAttribute('id').

Also, unless you're deliberately inserting HTML markup, it's quicker, safer, and more predictable to assign to textContent to assign text content, rather than innerHTML:

var names = document.querySelectorAll('.name');

var text = new Array();
var strtext = '';

for (var i = 0; i < names.length; i++) {
  var arlength = text.length;
  text[arlength] = '[' + names[i].id + ']';
}
strtext = text.join(' and ');
document.querySelector('#output-1').textContent = strtext;
document.querySelector('#output-2').textContent =
  strtext.match(/[^[\]]+(?=\])/g).join('');

<p id='a' class='name'>Adam</p>
<p id='b' class='name'>Bob</p>
<p id='c' class='name'>Cane</p>
<p id='d' class='name'>Dan</p>
<p id='e' class='name'>Ed</p>
<p id='f' class='name'>Fred</p>
<p id='g' class='name'>Gene</p>

<p id='output-1'></p>
<p id='output-2'></p>

The regular expression in the code above

[^[\]]+(?=\])

means:

[^[\]] - A character matching anything but a [ or a ]

+ - Repeat the preceeding character set as much as possible

(?=\]) - Lookahead for a literal ] after the last matched character

Regex is only showing one result how can I get it to show the rest of the results in JavaScript

2 Answers2