Question

我只是偶然发现了这种非常奇怪的行为。我有一个从嵌入式iframe中提取Youtube视频ID的正则表达式。正则表达式看起来像这样：

var regex = /(?:youtu\.be|youtube\.com|ytimg\.com|youtube-nocookie\.com).*(?:\/|\?v=|\&v=|\?video_id=|\&video_id=)([\w\-_]{11})[^\w\-_]?/ig;

我现在有一个嵌入式Youtube iframe，如下所示：

<iframe id="ytplayer" type="text/html" width="300" height="200"
  src="//www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=//example.com"
  frameborder="0"/>

如您所见，该正则表达式应该与此元素的src属性匹配。但是，如果我执行以下代码，它将返回false：

regex.test( $('#ytplayer').attr('src') );

你会说“好吧，你的正则表达式显然是错误的，再次检查”。但接下来看看这个：

regex.test( $('#ytplayer').attr('src').toString() );

这将返回true，即使它是完全相同的代码，只有添加toString()。是的，.attr('src')已经返回一个字符串！ 为什么会这样？我可以在Chrome和Firefox中重现这一点，因此很可能不是JS实施中的错误。

（你可以找到一个JsFiddle来试试here）

Answer 1

由于您使用正则表达式进行测试，请不要使用g标志

var regex = /(?:youtu\.be|youtube\.com|ytimg\.com|youtube-nocookie\.com).*(?:\/|\?v=|\&v=|\?video_id=|\&video_id=)([\w\-_]{11})[^\w\-_]?/i;

当您使用g标志时，正则表达式处理器将记住上次搜索的位置，并且在下一次搜索中它将从那里继续。如果第二次搜索中没有匹配，则索引将重置为0;

演示：Fiddle

如果您想进一步明确，请查看this demo，其中相同的搜索会一个接一个地重复，其中第一个匹配，第二个匹配失败

RegExp.match与jQuery.attr结果不匹配

1 个答案: