将YouTube id从标记的href中取出并嵌入到iframe中的正则表达式存在问题。

Question

我有一个聊天应用程序，我正在尝试这样做，这样每次有人发送链接到YouTube时，它都会创建一个嵌入式Iframe。

我创建了一个内部有正则表达式的函数，假设要定位一个带有YouTube链接的href并返回YouTube id，我使用这个正则表达式将所有指向嵌入式iframe的YouTube链接替换为正确的id。

它可以工作，除非在html输入中有一个以上的链接(在这种情况下，它会用最后一个链接的id替换所有链接和它们之间的所有东西到一个iframe中)。

这是一个示例：

​

  let convertYoutubeLinksToIframe = function (html) {
            let response = html;
            try {
                const findLinksRegex = /<a(?:[^]+href="(?:http(?:s)?:\/\/(?:m.)?(?:www\.)?youtu(?:\.be\/|be\.com\/(?:watch\?(?:feature=youtu.be\&)?v=|v\/|embed\/|user\/(?:[\w#]+\/)+))([^&#?\n]+)[^]+)">[^]+<\/a>?)+/gmi;
                response = html.replace(findLinksRegex , '<iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
            } catch (err) {
                return html;
            }
            return response;
    }

    
    let htmlExample = `<div><a href="http://www.youtube.com/watch?v=iwGFalTRHDA"></a>
<a href="http://www.youtube.com/watch?v=bdOBjlHJFJA&feature=related"></a>
<a href="http://youtu.be/ikjJllTKKHK"></a>
<a href="http://youtu.be/n17B_uFF4cA"></a>
<p>This is a paragraph</p>
<a href="http://www.youtube.com/watch?v=njZPH8544sc"></a>
<a href="http://youtu.be/nbJRX655sc"></a>
<a href="https://youtu.be/2sFlFPmUfNo?t=1"></a></div>` 

    console.log(convertYoutubeLinksToIframe(htmlExample));

​

如果你运行这段代码，你会看到在div中只有一个iframe，而不是我想要得到的每个链接都有一个帧。另外，中间的段落也被删除了。

这是我的预期输出：

    <div>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/iwGFalTRHDA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/bdOBjlHJFJA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/ikjJllTKKHK" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/n17B_uFF4cA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <p>This is a paragraph</p>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/njZPH8544sc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/nbJRX655sc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      <iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/2sFlFPmUfNo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

有人能帮我解决这个问题吗？

Answer 1

正如Simon所说，[^]和+的组合匹配最后一个锚点中的href之前的所有内容，然后regex的其余部分捕获剩余的文本：

/<a(?:[^]+href

我用regex101介绍了正则表达式，这是一个很好的网站，当你不得不使用长的正则表达式时，这是一个有效的网站：

​

let convertYoutubeLinksToIframe = function(html) {
  let response = html;
  try {
    const findLinksRegex = /<a(?:[^]href="(?:http(?:s)?:\/\/(?:m.)?(?:www\.)?youtu(?:\.be\/|be\.com\/(?:watch\?(?:feature=youtu.be\&)?v=|v\/|embed\/\user\/(?:[\w#]+\/)+))([^#?&\n\">]+)).+?(?=<)<\/a>)/gmi;
    response = html.replace(findLinksRegex, '<iframe style="max-width: 100%; min-height: 160px;" src="https://www.youtube.com/embed/$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
  } catch (err) {
    return html;
  }
  return response;
}


let htmlExample = `<div><a href="http://www.youtube.com/watch?v=iwGFalTRHDA"></a>
<a href="http://www.youtube.com/watch?v=bdOBjlHJFJA&feature=related"></a>
<a href="http://youtu.be/ikjJllTKKHK"></a>
<a href="http://youtu.be/n17B_uFF4cA"></a>
<p>This is a paragraph</p>
<a href="http://www.youtube.com/watch?v=njZPH8544sc"></a>
<a href="http://youtu.be/nbJRX655sc"></a>
<a href="https://youtu.be/2sFlFPmUfNo?t=1"></a></div>`

console.log(convertYoutubeLinksToIframe(htmlExample));

​