Search code examples
javascriptregexgwtjsnigwtp

Strange behavior of javascript RegExp in Firefox


I need your advice on a strange problem I encountered in my GWTP application.

The setup is like this: my application (GWTP front, Spring + Tomcat backend) and I'm doing all the tests on a SuperDevMode setup. The application has many modules (dealing with different businesses) and I have just added a new module recently.

We have a header with a menu where the user can select a specific value and that value will be added to the URL, and we'll then reload the page.

For example:

  • Current URL is localhost:8888?devId=2&locale=en#somePlaceToken
  • After selecting a value in the dropdown menu (e.g. test1), URL is localhost:8888?devId=2&locale=en&testVal=test1#somePlaceToken

This is done the following way (this has been working this way for a long time for other modules):

In Presenter:

public void onChangeTestVal(ChangeTestValEvent evt) {
   GWT.log("zzzz, it did get here.");
   UrlUtil.append("testVal", evt.getValue());
}

UrlUtil:

public static native void append(String key, String value) /*-{
    key = escape(key); value = escape(value);

    var s = $wnd.document.location.search;
    var kvp = key + "=" + value;

    var r = new RegExp("(&|\\?)" + key + "=[^\&]*");

    s = s.replace(r, "$1" + kvp);

    console.log("test RegExp: " + RegExp.$1);

    if (!RegExp.$1) { s += (s.length > 0 ? '&' : '?') + kvp; };

    $wnd.document.location.search = s;
}-*/

So to summarize, the idea is to check if "key" exists -> replace; otherwise, add the string "key=val".

I have tested and this works well on a pure html + js setup. However, in my case, when trying with the actual GWT application, I find that it sometimes doesn't work !

In particular, when it does not work, thanks to the logs, I find that the RegExp.$1 returns some strange value: the version of the Firefox I'm using (Log: test RegExp: 26 for FF 26, and 52 for FF 52 ..)

Any idea on whichever factor that might have interfered in the regex matching process above ? I'm completely clueless because it works fine on the pure html + js setup :( And even more strange, it's only the new module that has this error, and on Firefox only. I'm pretty sure I'm not missing some configuration (compared to other modules), so I need a hint as to why this happens. Thanks in advance.


Solution

  • See RegExp.$1-$9, the RegExp.$1 property is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

    What you should do is assign a new value to a new var, then, after replacing, check if old string is equal to a new string, and if not, the replacement was performed, else, it was not.

    Use something like

    var r = new RegExp("(&|\\?)" + key + "=[^&]*");
    var new_s = s.replace(r, "$1" + kvp);
    if (new_s === s) { new_s += (new_s.length > 0 ? '&' : '?') + kvp; };
    $wnd.document.location.search = new_s;