SyntaxError: expected expression, got '.'

Question

Does someone know where this JavaScript error comes from?

SyntaxError: expected expression, got '.'

I get this error when using a regular expression with a slash (escaped) like el.href.match(/video\/(.*)@/)[1]; as a string passed to a function like createTextNode, textContent or innerHTML.

This regex works when not stored as text. A regex without slash as text works, you can see my code example:

HTML:

<a style="display: none; width: 840px; height: 472px;" href="http://videos.francetv.fr/video/147338657@Info-web" id="catchup" class="video"></a>

JavaScript:

var el = document.getElementById("catchup");
var script = document.createElement("script");
var text = `
    (function() {
        var id = el.href.match(/video\/(.*)@/)[1];
        alert("test 4 - regex with slash as text: " + id);
    })();`; 
script.appendChild(document.createTextNode(text));      
document.getElementsByTagName("head")[0].appendChild(script);

Working and failing tests can be found here:

https://github.com/baptx/baptx.github.io/blob/65f11b77df5a7464365374b3505921a4ef9b1272/get_m3u8_debug/get_m3u8_debug.htm

You can test it live on GitHub Pages (JSFiddle did not work in my case):

https://baptx.github.io/get_m3u8_debug/get_m3u8_debug.htm

Answer 1

You are escaping the forward slash instead of having a baskward slash.

`el.href.match(/video\/(.*)@/)[1]` === 'el.href.match(/video/(.*)@/)[1]'
// '\/' == '/', not '\\/'

You need to escape the backward slash as well:

`el.href.match(/video\\/(.*)@/)[1]`

You can also take advantage of the template string with the string representation of a regex to get it's source code representation. Basically, eval(/any regex/ + '') will get the same regex.

var regex = /video\/(.*)@/;
var text = `el.href.match(${regex})[1]`;
// Or:
var text = `el.href.match(` + /video\/(.*)@/ + ')[1]';

/video\/(.*)@/igm + '' === '/video\\/(.*)@/gim';
new RegExp('video\\/(.*)@', 'gmi') + '' === '/video\\/(.*)@/gim';