SyntaxError：预期的表达式，得到了'。

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';

Answer 2

If by "as a string" you mean "video\\/(.*)@" , then the backslash itself needs to be escaped, "\\\\" is a string literal containing one backslash:

/video\/(.*)@/

is the same as

new Regex("video\\/(.*)@")

Answer 3

You're using template literals with literal strings as regular expressions, and you have to double-escape the slashes, or any other special character, in those regular expressions.

Javascript interprets and removes the first escape character when parsing the string literal, and you need the escape character to make it into the script, so you'll need two of them.

var text = `
        (function() {
            var id = el.href.match(/video\\/(.*)@/)[1];
            alert("test 4 - regex with slash as text: " + id);
        })();`;