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);You could capture .* and match without the global flag.
/(?:type: )(.*)/
In this way, it returns an array of two strings:
type: BUSINESS)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.
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*/
}
}