javascript - 我正在使用 JavaScript 和 Regex 围绕链接构建对象。需要澄清一下

Question

澄清一下——我已经构建了一个评论系统，可以清理所有 HTML 并将其显示为纯文本，以防止拖钓、跨站点脚本等。

最重要的是，我有在页面加载后运行的 javascript，并检测到 Youtube 和 Imgur 内容的直接链接，然后构建适当的播放器/框架/标签来显示该内容。

这是我的示例代码:

<div class="video imgur">
https://i.imgur.com/Ym7MypF.jpg

https://www.youtube.com/watch?v=t-ZRX8984sc
</div>

和脚本:

$('.video').html(function(i, html) {
    return html.replace(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="420" height="345" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>');
});

$('.imgur').html(function(i, html) {
    return html.replace(/(?:https:\/\/)?(?:i\.)?(?:imgur\.com|)\/(.+)/g, '<img src="https://i.imgur.com/$1">');

});

我可以在没有另一个的情况下让一个工作 - 然而 - 在同一页面上同时运行两者总是会产生像这样的损坏标签和链接，具体取决于顺序:

<iframe width="420" height="345" src="https:&lt;img src=" https:="" i.imgur.com="" www.youtube.com="" embed="" t-zrx8984sc"="" frameborder="0" allowfullscreen=""></iframe>

为什么我的代码不能区分 Imgur 和 Youtube 并分别处理它们？我是 Regex 的新手，不知道我做错了什么。如果有人能解决我的问题，我将不胜感激。

Answer 1

您的 Imgur 正则表达式匹配了太多 URL，例如:

• > https://example.com
• > https://www.youtube.com/watch?v=foobar
• > https://imgur.com/foobar

尝试改用这个正则表达式:/(?:https:\/\/)?(?:i\.)?(?:imgur\.com)\/(.+)/g