JavaScript regex to match multiple optional lines in any order

Question

I struggled with this for a while and cannot understand. I see in Regex a match for a string containing two names in any order that can be used to search for words that occur in any order. I added some additional groups for example from this post:

const regex = /^(?=.*\b(jack)\b)(?=.*\b(james)\b).*$/;
"hi james this is jack".match(regex);
  // => ["hi james this is jack", "jack", "james"]

However, I also want to make both words optional. That is, something like this:

"hi james this is jack".match(someMagicRegex);
  // => ["hi james this is jack", "jack", "james"]

"hi this is jack".match(someMagicRegex);
  // => ["hi this is jack", "jack", undefined]

"hi james".match(someMagicRegex);
  // => ["hi james", undefined, "james"]

It is important that the matches remain in the correct order. That is, a match jackwill always be the second element in an array of matches.

I tried to add ?in different places (including after the new groupings), but nothing that I tried did not give the desired result.

Is this possible?

UPDATE. , CSS, , min-width: Xpx max-width: Ypx:

"only screen and (min-width: 500px) and (max-width: 599px)".match(someMagicRegex);
  // => ["...", "500", "599"]

"only screen and (min-width: 500px)".match(someMagicRegex);
  // => ["...", "500", undefined]

"(max-width: 599px)".match(someMagicRegex);
  // => ["...", undefined, "599"]

( min-width, .)

Answer 1

, (?), . No 'magic regex' ( , ), array, :

regex = ["min-width:\\s*(\\d+)px","max-width:\\s*(\\d+)px"];

str = "only screen and (min-width: 500px) and (max-width: 599px)";

//str = "only screen and (min-width: 500px)"; 

//str="(max-width: 599px)";


matches = [];

for( i = 0; i < regex.length; i++ ) {
    if( RegExp(regex[i]).exec(str) ) {
        matches.push(RegExp(regex[i]).exec(str)[1]);
    } else {
        matches.push(undefined)
    }
}

console.log(matches);

Hide result

2:

regex = ["min-width:\\s*(\\d+)px","max-width:\\s*(\\d+)px"];



str = "only screen and (min-width: 500px)"; 

//str="(max-width: 599px)";


matches = [];

for( i = 0; i < regex.length; i++ ) {
    if( RegExp(regex[i]).exec(str) ) {
        matches.push(RegExp(regex[i]).exec(str)[1]);
    } else {
        matches.push(undefined)
    }
}

console.log(matches);

Hide result

3:

regex = ["min-width:\\s*(\\d+)px","max-width:\\s*(\\d+)px"];



str="(max-width: 599px)";


matches = [];

for( i=0; i < regex.length; i++ ) {
    if( RegExp(regex[i]).exec(str) ) {
        matches.push(RegExp(regex[i]).exec(str)[1]);
    } else {
        matches.push(undefined)
    }
}

console.log(matches);

Hide result

Answer 2

UPDATE - . 2 . / CSS, .

var fileCSS='.entry-meta {position: relative; top: 5px; left: 5px; font-size: 0.8em; line-height: 18px; color: #aaa; } .entry-footer { display: inline; color: white; margin: 0 2em; padding: 0; font-size: 0.8em; line-height: 18px; } div { MIN-width: 200px; display: block; max-width: 80% ; position: relative; background: rgba(255,255,255,0.05); padding-bottom: 20px; } img { width: 640px; min-width: 12vh ;height: auto; max-width: 800px; margin-bottom: 10px; }';

var properties = ['min-width', 'max-width'];

function pMatch(CSS, classOrTag, propertiesToFind) {
	var foundProperties=[]; var found=null;
	mainREGEX= new RegExp(classOrTag+"\\s*[{][()#\"'/\*a-z0-9\\s:%;*,.=-]*[}]", 'i');
	var found=CSS.match(mainREGEX)[0];
	if(found!==null) {
		for(a=0; a<propertiesToFind.length; a++) {
			propertyREGEX=new RegExp('('+propertiesToFind[a]+'\\s?:\\s?[0-9.]+[a-z%\\s]+).?;', 'i');
			var property=found.match(propertyREGEX);
			property?foundProperties.push(property[1]):foundProperties.push('undefined');
		}
	}
	return foundProperties;
}
console.log(pMatch(fileCSS, 'div', properties));
console.log(pMatch(fileCSS, '.entry-meta', properties));
console.log(pMatch(fileCSS, 'img', properties));

Hide result

Answer 3

, python, .

, , :

import re

strings = ["only screen and (min-width: 500px) and (max-width: 599px)", "only screen and (min-width: 500px)", "(max-width: 599px)"]

regex = re.compile(r'(min|max)-width:\s*(\d+)px(.*(?!\1)(max|min)-width:\s*(\d+)px)?')
for string in strings:
    match = re.search(regex, string)
    print
    print string
    if match:
        term_1 = match.group(1)
        value_1 = match.group(2)
        term_2 = match.group(4)
        value_2 = match.group(5)
        print "Match!\n{} {}".format(term_1+"-width:", value_1)
        if term_2:
            print "{} {}".format(term_2+"-width:", value_2)
    else:
        print "Not a match"

, :

only screen and (min-width: 500px) and (max-width: 599px)
Match!
min-width: 500
max-width: 599

only screen and (min-width: 500px)
Match!
min-width: 500

(max-width: 599px)
Match!
max-width: 599

this. , lookahead ( lookahead) "match expr, ".

, lookahead , , , , , max min. , px .* . . , ?, , .

Answer 4

. RegExp while :

function getMatches (str) {
    var reg = /(min|max)-width\s*:\s*(\d*\.?\d+)/g,
        ret = [undefined, undefined],
        arr;
    while ((arr = reg.exec(str)) !== null) {
        ret[+(arr[1] === "max")] = arr[2];
    }
    return ret;
}

Jsfiddle: https://jsfiddle.net/elchininet/bwg1onk6/