Having a regex working for both Chrome and Safari-CodePudding

We encountered some problems in Safari browsers with the regex that we are using. This was the regex:

/(?<=type: ).*./g

Safari could not handle this and therefore we changed it to this:

/(?:)(type: ).*./g

The problem with this is that now for Chrome it does not return the right value back. Is there a way to have a regex working for both Chrome and Safari with the same response. So desired response is:

BUSINESS
ACC
false

Code Example

const query = "{\n          testObject(testInput : {\n            id: \"id-13\",\n            life: ACC,\n            type: BUSINESS,\n            promo: [],\n            isvalid: false\n          })}\n      }"

const pattern = /\(([^)] )\)/g;
const result = query.match(pattern) ? query.match(pattern).map((v) => v.trim().replace(/^\(|\)$/g, ''))[0] : null;

/* DOES NOT WORK IN SAFARI */
const queryTypePattern = /(?<=type: ).*./g;
const queryLifePattern = /(?<=life: ).*./g;
const queryIsValidPattern = /(?<=isvalid: ).*./g;

const queryType = result.match(queryTypePattern) ? result.match(queryTypePattern).map((v) => v.trim().replace(',', ''))[0] : null;
const queryLife = result.match(queryLifePattern) ? result.match(queryLifePattern).map((v) => v.trim().replace(',', ''))[0] : null;
const queryIsValid = result.match(queryIsValidPattern) ? result.match(queryIsValidPattern).map((v) => v.trim().replace(',', ''))[0] : null;

console.log('#### RETURNS THE CORRECT OUTPUT IN CHROME: ');
console.log(queryType);
console.log(queryLife);
console.log(queryIsValid);


/* WORKS IN SAFARI */
const queryTypePattern2 = /(?:type: ).*./g;
const queryLifePattern2 = /(?:life: ).*./g;
const queryIsValidPattern2 = /(?:isvalid: ).*./g;

const queryType2 = result.match(queryTypePattern2) ? result.match(queryTypePattern2).map((v) => v.trim().replace(',', ''))[0] : null;
const queryLife2 = result.match(queryLifePattern2) ? result.match(queryLifePattern2).map((v) => v.trim().replace(',', ''))[0] : null;
const queryIsValid2 = result.match(queryIsValidPattern2) ? result.match(queryIsValidPattern2).map((v) => v.trim().replace(',', ''))[0] : null;

console.log('#### RETURNS THE INCORRECT OUTPUT IN CHROME: ');
console.log(queryType2);
console.log(queryLife2);
console.log(queryIsValid2);

CodePudding user response：

You could capture .* and match without the global flag.

/(?:type: )(.*)/

In this way, it returns an array of two strings:

full matched value (ex: type: BUSINESS)
captured group (ex: BUSINESS)

We need the second one.

const query = "{\n          testObject(testInput : {\n            id: \"id-13\",\n            life: ACC,\n            type: BUSINESS,\n            promo: [],\n            isvalid: false\n          })}\n      }"

const pattern = /\(([^)] )\)/g;
const result = query.match(pattern) ? query.match(pattern).map((v) => v.trim().replace(/^\(|\)$/g, ''))[0] : null;

const queryTypePattern2 = /(?:type: )(.*)/;
const queryLifePattern2 = /(?:life: )(.*)/;
const queryIsValidPattern2 = /(?:isvalid: )(.*)/;

const queryType2 = result.match(queryTypePattern2) ? result.match(queryTypePattern2).map((v) => v.trim().replace(',', ''))[1] : null;
const queryLife2 = result.match(queryLifePattern2) ? result.match(queryLifePattern2).map((v) => v.trim().replace(',', ''))[1] : null;
const queryIsValid2 = result.match(queryIsValidPattern2) ? result.match(queryIsValidPattern2).map((v) => v.trim().replace(',', ''))[1] : null;

console.log(queryType2);
console.log(queryLife2);
console.log(queryIsValid2);

As the solution does not contain lookbehind, it will work for both browsers.

CodePudding user response：

This answer assumes that you have a correct regex for Chrome and another correct regex for Safari, but the regex which is correct for one browser is incorrect in the other.

Here you have a function which detects the browser:

function fnBrowserDetect(){
                 
         let userAgent = navigator.userAgent;
         let browserName;
         
         if(userAgent.match(/chrome|chromium|crios/i)){
             browserName = "chrome";
           }else if(userAgent.match(/firefox|fxios/i)){
             browserName = "firefox";
           }  else if(userAgent.match(/safari/i)){
             browserName = "safari";
           }else if(userAgent.match(/opr\//i)){
             browserName = "opera";
           } else if(userAgent.match(/edg/i)){
             browserName = "edge";
           }else{
             browserName="No browser detection";
           }
         
          document.querySelector("h1").innerText="You are using "  browserName  " browser";         
  }

Now, let's implement a function that uses the browser-detector function above:

function getRegex() {
     switch (fnBrowserDetect()) {
         case "safari": return "yoursafariregex";
         case "chrome": return "yourchromeregex";
         /* Logic for other browsers if you want to support them*/
     }
}