Question

我有一个带有输入的表单，用于放置 Youtube链接。我会自动用该视频的 ID 替换该链接，直到现在为止，都无需担心。

但是当我想要下面的ID预览时遇到一个问题，我得到?v=f和f。

问题是我只想要ID，然后将其放入<iframe>

$('.youtube_url').on('change', function (){

        var newval = '',
            $this = $(this);

        if (newval = $this.val().match(/(\?|&)v=([^&#]+)/)) {

            $this.val(newval.pop());

        } else if (newval = $this.val().match(/(\.be\/)+([^\/]+)/)) {

            $this.val(newval.pop());

        } else if (newval = $this.val().match(/(\embed\/)+([^\/]+)/)) {

            $this.val(newval.pop().replace('?rel=0',''));
        }
        $('#preview').html(newval);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="youtube-id">Youtube URL:</label>
<input id="youtube-id" type="text" class="youtube_url">
<div id="preview"></div>

<p>URL for test : 
https://www.youtube.com/watch?v=dTNBRS8ZS4U
</p>

Answer 1

javascript match()不会返回您认为的样子：

如果字符串与表达式匹配，它将返回一个包含整个匹配字符串的Array作为第一个元素，然后是括号中捕获的所有结果。如果没有匹配项，则返回null。

因此'https://www.youtube.com/watch?v=dTNBRS8ZS4U'.match(/(\?|&)v=([^&#]+)/)返回数组：

["?v=dTNBRS8ZS4U", "?", "dTNBRS8ZS4U"]

即匹配字符串的完整部分，然后是捕获的第一和第二位。

然后，您立即弹出（）最后一个元素dTNBRS8ZS4U，并将其放回输入字段。一切都很好。

但是您可以预览newval数组的更新内容。由于您已经提取了最后一个元素，因此newval现在是：

["?v=dTNBRS8ZS4U", "?"]

预览中您将获得什么。解决方案将涉及保存pop（）的内容并将放入预览。

将视频ID提取到YouTube URL

1 个答案: