Javascript 使用正则表达式 youtube 视频 ID 格式化数组

Question

提前致歉，因为我知道这个问题 many answers 但是我没有成功实施任何给定的答案。话虽如此，让我们进入正题。

我有一个 table 包含文本输入，用户可以在其中输入 youtube 视频 ID
提交我的 javascript 将创建一个包含这些 youtube 视频 ID 的数组
如果用户输入 youtube url，数组会中断

快速解决方案
如果有人可以帮助我让正则表达式验证工作，这样用户就会得到正确的提醒并更正他们的输入，那将是一个好的开始

理想解
我不喜欢提醒用户并让他们更改他们输入的内容，因为这是糟糕的用户体验，所以如果今天有人觉得有帮助并且可以告诉我如何获取他们输入的内容并删除 url 位并仅将 youtube 视频 ID 推送到超级精彩的数组:)

示例：如果用户输入

["https://www.youtube.com/watch?v=K1CScQOj1dA", "https://youtu.be/wIJ1sFrgMds", "IISzG-sPUuo"]

代码将格式化他们的输入，最终的 userSongs 数组将是：

["K1CScQOj1dA", "wIJ1sFrgMds", "IISzG-sPUuo"]

这是我的 fiddle http://jsfiddle.net/1qLr9n2j/
如您所见，当其中两个输入无效时，警报显示不匹配条目

Answer 1

您可以使用以下方式进行匹配：

.*?([\w-]+)$

并替换为</code>。 见<a href="https://regex101.com/r/aD2rI1/7" rel="nofollow">DEMO</a> JS代码： <pre><code>var rx = /.*?([\w-]+)$/; for (var i = 0; i < userSongs.length; i++) { userSongs[i] = userSongs[i].replace(rx, ''); } alert(userSongs);

Answer 2

这是我对理想解决方案

的破解

var re = new RegExp("youtu(?:\.be|be\.com)/(?:.*v(?:/|=)|(?:.*/)?)([a-zA-Z0-9-_]+)");

$('.song-input').each(function () {
    var val = $(this).val()
    if (val) {
        var matches = val.match(re);
        $(this).val(matches[1]);
    }
});

我将 James Poulson answer 中的正则表达式用于您链接到的问题。

Javascript 使用正则表达式 youtube 视频 ID 格式化数组

Javascript format array with regex youtube video ids

javascript

regex

youtube

arrays

jquery