SyntaxError：预期的表达式，得到“。”

Posted 2023-05-07

【中文标题】SyntaxError：预期的表达式，得到“。”

【英文标题】：SyntaxError: expected expression, got '.'

【发布时间】：2017-03-04 15:27:21

【问题描述】：

有人知道这个 javascript 错误来自哪里吗？

SyntaxError: expected expression, got '.'

当使用带有斜线（转义）的正则表达式（如el.href.match(/video\/(.*)@/)[1];）作为字符串传递给 createTextNode、textContent 或 innerhtml 等函数时，我收到此错误。

此正则表达式在不存储为文本时有效。 一个没有斜线的正则表达式作为文本工作，你可以看到我的代码示例：

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

工作和失败的测试可以在这里找到：

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

您可以在 GitHub Pages 上对其进行实时测试（JSFiddle 在我的情况下不起作用）：

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

【问题讨论】：

您应该将相关代码直接传递给问题（以防您删除 repo），并且正确的链接应该指向特定版本，而不是主分支 - https://github.com/baptx/baptx.github.io/blob/65f11b77df5a7464365374b3505921a4ef9b1272/get_m3u8_debug/get_m3u8_debug.htm

@Aprillion 谢谢，我想过在 *** 上添加代码，但我希望人们也能看到所有的工作案例。通常我不会删除 repo，但我有想法备份 Wayback Machine 上的链接 web.archive.org/web/20161022102615/https://baptx.github.io/… 特定版本的好点，以防我想修复那里的错误。

【参考方案1】：

您正在转义正斜杠而不是使用 baskward 斜杠。

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

您还需要转义反斜杠：

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

您还可以利用带有string representation of a regex 的模板字符串来获取它的源代码表示形式。基本上，eval(/any 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';

【讨论】：

谢谢，$regex.source 是保留原始正则表达式的绝妙技巧。我认为它仅适用于 ES6 模板文字。我们还可以使用普通字符串保留原始正则表达式吗？很难在 3 个答案之间做出选择，但你是第一个 ;) 无论如何，我找到了一种更好的方法来使用 GreaseMonkey 和内容脚本注入：***.com/questions/2303147/…

需要注意的是regex.source不能和flags一起使用，那你还得加上regex.flags，这是ES6，目前浏览器不支持

@baptx 如果您正在执行 UserScript，只需执行 // @grant none，您就不需要注入内容脚本。 wiki.greasespot.net/Content_Script_Injection

@Artyer 是的，这就是我在链接中解释的内容。你知道我们是否也可以使用普通字符串保留原始正则表达式吗？请参阅我对您的回答的第一条评论。

@adeneo 很高兴知道。您认为可以使用普通字符串而不是模板文字来保留原始正则表达式（不使用 regex.source 双重转义斜线）吗？

【参考方案2】：

如果“作为字符串”是指"video\/(.*)@"，则反斜杠本身需要转义，"\\" 是包含一个反斜杠的字符串文字：

/video\/(.*)@/

和

一样

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

【参考方案3】：

您正在使用带有文字字符串的模板文字作为正则表达式，并且您必须在这些正则表达式中对斜杠或任何其他特殊字符进行双重转义。

Javascript 在解析字符串文字时会解释并删除第一个转义字符，并且您需要转义字符才能将其放入脚本中，因此您需要其中两个。

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

【讨论】：

谢谢。作为信息，它也发生在普通字符串中，不仅仅是 ES6 模板文字。

是的，你插入的任何字符串都会发生这种情况，因为第一个转义字符在字符串文字的解析中丢失了，你总是需要其中两个，通常称为“双重转义” " 在 javascript 中做这样的事情。

你或其他人是否也知道为什么JavaScript错误被称为SyntaxError: expected expression, got '.'，即'.'他们在谈论吗？

因为斜线没有被转义，所以它关闭了正则表达式。然后你有一个左括号，它在 javascript 中是有效的，但句号不是，这是一个语法错误，并且在那个位置是意外的

没错，谢谢。这可能就是为什么我在 Internet 上搜索“SyntaxError: expected expression, got '.'”时一无所获，这对我的示例来说太具体了。