Split JS string based on multiple different RegExr conditions-CodePudding

I have a JS string, say:

var testString = "words here, svg_icon('Var-1') svg_icon('Var_2'), and even more words here";

I understand how to match the string based on a fixed value e.g. if I want to match on svg_icon:

var testString = "words here, svg_icon('Var-1','var_3') svg_icon('Var_2'), and even more words here";
var filterMatch = /(svg_icon)/;
var results = testString.match(filterMatch);

results.forEach((result) => {
  console.log(result);
})

This logs the 2 matches it finds, which I'm expecting:

"svg_icon"
"svg_icon"

What I'm trying to do is match the expression so my output will be:

"svg_icon('Var-1','var_3')"
"svg_icon('Var_2')"

I think this is possible with Regular expressions, but cannot find how to deal with combining conditions whilst matching the changing "variable" names (e.g.'Var-1','var_3' and Var_2) that may contain special characters (just dashes and underscores).

Any help on what RegEx I can use in this situation, or if this is in fact possible with so many conditions.

Thanks in advance for any advice!

CodePudding user response：

Match the ( through ) after svg_icon.

You need to use the g modifier to match multiple times. You're just matching the first svg_icon -- you're getting two outputs because match[0] is the full match, and match[1] is the capture group.

var testString = "words here, svg_icon('Var-1','var_3') svg_icon('Var_2'), and even more words here";
var filterMatch = /svg_icon\([^)]*\)/g;
var results = testString.match(filterMatch);

results.forEach((result) => {
  console.log(result);
})

CodePudding user response：

Is this what you're looking for?

svg_icon\('[vV][aA][rR][\-_]\d '(?:,'[vV][aA][rR][\-_]\d ')*\)

https://regex101.com/r/WctF2Q/1

CodePudding user response：

Change regex to /svg_icon. ?\)/g

Segment	Meaning
`svg_icon`	Match literal "svg_icon"...
`.`	...then any character or whitespace...
	...for one to an unlimited amount of occurrences...
`?\)`	...until the first closing parenthesis (escaped with `\`).

Add a global flag which is required to use .matchAll() (.match() on steroids):

var testString = "words here, svg_icon('Var-1','var_3') svg_icon('Var_2'), and even more words here";
var filterMatch = /svg_icon. ?\)/g;
var result = [...testString.matchAll(filterMatch)].flat();
console.log(`Result is an array of matches:`);
console.log(result);
console.log(`Access a single match like so:`);
console.log(`First match is: result[0]`);
console.log(result[0]);
console.log(`Second match is: result[1]`)
console.log(result[1]);

.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { min-height: 100% !important; min-width: 100%; }

The signature is just like .match() but you'll need to wrap everything into square brackets [] and use the spread operator ... and then flatten it with .flat(). The result is an array of matches.