0

我创建了一个工具，允许用户抓取 YouTube 视频的缩略图，尽管我在循环时遇到了一些问题。在输入视频的观看 ID 时，图像会显示，但是如果您随后在输入中重新输入另一个 ID，它不会更改。我如何更改代码以允许循环/多个图像抓取？

<!doctype html>
<html>
<head>
    <title>Thumbnail Grabber</title>
    <script type="text/javascript">
    window.onload = function()
    {
        document.getElementById( 'inp' ).onkeyup = keyUp;
    }

    function keyUp()
    {
        var img = document.getElementById( 'image' );
        img.src = img.src.replace( /url=[^&]+/, this.value +'/maxresdefault.jpg' );
    }
    </script>
    </head>
    <body>
        <input type="text" id="inp">

        <img id="image" src="http://img.youtube.com/vi/url=example/">
    </body>

4

1 回答 1

0

您的替换件也正在拆除该url=零件。假设this.value是"X"，它会将src属性更改为http://img.youtube.com/vi/X/maxresdefault.jpg。在下一个 keyup 事件中，将不再有任何东西可以替换。

另外，不要忘记用户输入&字符的情况。

所以我建议.replace( /url=[^&]+/, "url=" + encodeURIComponent(this.value+'/maxresdefault.jpg') );

于 2013-06-10T15:32:32.313 回答