SyntaxError:期望的表达式,得到'。'

时间:2016-10-22 11:23:17

标签: javascript regex syntax-error textnode createtextnode

有人知道这个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页面上测试它(JSFiddle在我的情况下不起作用):

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

3 个答案:

答案 0 :(得分:3)

你正在逃避正斜杠,而不是有一个苛刻的斜线。

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

答案 1 :(得分:2)

如果用&#34;作为字符串&#34;你的意思是"video\/(.*)@",然后需要对反斜杠本身进行转义,"\\"是一个包含一个反斜杠的字符串文字:

/video\/(.*)@/

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

答案 2 :(得分:2)

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

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

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