CODEWITHSUNDEEP
javascriptregexgoogle-chromeoffice-addinsoutlook-web-addins
Mohammed B
Mohammed B

Reputation: 305

Why does my regex expression only work in some browsers?

Working on an add-in for outlook which uses a regular expression to replace "{First Name|Default=Friend}" and "{Last Name}" strings with actual first and last names of contact. The regular expression works fine when testing in Outlook online via Google Chrome but not in Outlook for Mac, which apparently uses Netscape version 5 (or at least that is the browser that comes up under navigator.userAgent).

String.prototype.replaceAll = function (str1, str2, ignore) {
return this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, "\\$&"), (ignore ? "gi" : "g")), (typeof (str2) == "string") ? str2.replace(/\$/g, "$$$$") : str2);
    } 

function replaceNames(){
var content = "{First Name|Default=Friend} {Last Name}"
var firstName = "Ted";
var lastName = "Doe";
let currentContent = content.replaceAll('{First Name|Default=Friend}', firstName);
currentContent = currentContent.replaceAll('{Last Name}', lastName);
console.log(currentContent);
}

replaceNames();

Chrome 73 returns content as: Ted Doe

Netscape 5 (from within Outlook for Mac) returns content as: Ted {Last Name}

What could be going wrong?

Upvotes: 0

Views: 1044

Answers (2)

Thomas Urban
Thomas Urban

Reputation: 5061

Outlook is known to have very limited capabilities in rendering HTML, obeying CSS and probably handling Javascript. This still applies to latest versions of Outlook for Windows that ship with recent releases of Office 365. Thus, don't expect any information on why Outlook fails to behave as expected since its a commercial, closed-source product that's barely focusing on standard compliance. I bet it's working to look comfortable at most by design.

Comparing Outlook for Mac/Windows with Outlook Online is boosting this ill-fated impression since Outlook Online doesn't rely on an ancient web engine but on the browser you are using. So, Chrome it is in your case which is the opposite end of a spectrum of currently used web engines with Chrome being at the very top end Outlook definitely close to the bottom.

Regarding your RegExp you should try reducing its code first eliminating unnecessary escapes. Try some decent IDE or online regular expression tool for that.

/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g

might become

/[/,!\\^${}[\]().*+?|<>&-]/g

though older browsers known to have limited capabilities on regular expressions might fail to parse that properly. Nonetheless, several escaped characters don't need escaping at all. Then try the same RegExp in the oldest Internet Explorer you can get. If it's working there it might be working in Outlook as well. This doesn't apply if latest Internet Explorer is 11.0 for its anything but modern, but still very different from what seems to be used with Outlook.

In addition I wouldn't rely on extending prototypes of native objects - with regards to String.prototype.replaceAll = function ... - in a context like Outlook for old browsers were known to have issues with that feature either and it might be subject to additional limitations due to security-related considerations in a mail client running custom script code.

Next, I consider myself a fairly skilled Javascript developer but I'm struggling to get your code's intention. Thus, IMHO you should consider using different approach that works without complex dynamic RegExp. I guess this helps with getting cleaner code people are capable to comprehend and that you will be capable to explain in 18 months from now. Your approach looks rather hackish to me which is bad combination with support for broken browsers. I am sure it's possible to achieve your intention without regular expressions by using simple old-style Javascript, only. Using very basic, non-dynamic regular expressions might be ok, but try relying on "".indexOf() and "".substring() and you will get code that's working in Netscape Navigator 5.0 as well.

Regarding discovered browser version, try analysing the navigator.userAgent in more detail and compare it with existing user agent databases to get a more sophisticated result on what browser engine is used in Outlook. Mentioning Netscape Navigator doesn't mean much on its own. My Edge browser claims to have something to do with Mozilla/5.0, AppleWebKit and Chrome/64.0 at the same time.

In conclusion it might be worth noting that in opposition to this question's title your code tends to work in most (actively used) browsers but fails in some software that's barely a browser but incorporates some vaguely known web engine.

Upvotes: 0

mplungjan
mplungjan

Reputation: 177786

What's wrong with 

function replaceNames() {
  var content = "{First Name|Default=Friend} {Last Name}"
  var firstName = "Ted";
  var lastName = "Doe";
  let currentContent = content.replace(/{First Name\|Default=Friend}/g, firstName);
  currentContent = currentContent.replace(/{Last Name}/g, lastName);
  console.log(currentContent);
}

replaceNames();

Upvotes: 1

Related Questions