Question

我有这个reGex，可以用iframe替换youtube链接。

const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;

它可以工作，但是它代替了整个字符串，可以说我有这样的东西...

常量字符串= This is a youtube like video but replace just the link... https://www.youtube.com/watch?v=0oPAkkHXYHs&t=541s;

它替换了整个字符串变量，但我希望它仅替换

https://www.youtube.com/watch?v=0oPAkkHXYHs&t=541s

最后应该给我这样的东西。

This is a youtube like video but replace just the link... <iframe ...>video</iframe>;

如何更改regExp以仅替换部分字符串？

string = string.replace(regExp, function (url) {
                     return `<iframe ....></iframe>`;
   });

Answer 1

我已经修改了您的正则表达式并使用了组，它应该可以正常工作。

const regExp = /(^.*)(http(s)?:\/\/)((w){3}.)?youtu(be|.be)?(\.com)?\/.+/;
    
      let str = `This is a youtube like video but replace just the link... https://www.youtube.com/watch?v=0oPAkkHXYHs&t=541s`;
    
      str = str.replace(regExp, '$1 <iframe ....></iframe>');
      console.log(str);

Answer 2

问题是您没有捕获字符串的开头或结尾，如果您put your Regex in Regexper可以轻松地进行检查。

您应该捕获捕获组中Youtube链接之前和之后的所有内容（就像您已经对链接的不同部分所做的一样）以保存它们：

const regExp = /^(.*)(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*)(.*)/

现在，您应该更新替换代码，以考虑到第一个匹配组不再是Youtube链接，而是它前面包含的任何字符串。

const sourceString = 'This is a youtube like video but replace just the link... https://www.youtube.com/watch?v=0oPAkkHXYHs&t=541s'
const regExp = /^(.*)(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*)(.*)/
const embeddedString = sourceString.replace(regExp, '$1 <iframe ...></iframe> $4')

console.log(embeddedString)

使用此功能时，您会注意到原始正则表达式中存在两个问题：包含时间戳记的Youtube链接以及包含HTTPS和开头或链接到youtube.com而不是youtu.be。

我建议您使用一些对工作很有帮助的工具   带有正则表达式：


Regexper是一个在线正则表达式可视化工具，可显示代表正则表达式的漂亮图形。

Regex101是一个用于正则表达式的在线工作台，使您可以检查它如何在测试字符串和   立即获得结果。

这可以通过使用更简单的正则表达式来匹配URL，然后使用另一个库来提取URL的有用部分（例如built-in URL class或第三方库）来解决。

还可以（至少部分地）更新正则表达式，以便提取视频ID并忽略其他所有内容：

const sourceString = 'This is a youtube like video but replace just the link... https://www.youtube.com/watch?v=0oPAkkHXYHs&t=541s'
const regExp = /^(.*)(?:https?)?(?:youtu\.be|youtube\.com)\/(?:v\/|u\/\w\/|embed\/|watch)(?:(?:(?:\?v=)([^& ]+)*)?)[^ ]*(.*)/
const embeddedString = sourceString.replace(regExp, '$1 <iframe ...></iframe> $3')

console.log(embeddedString)

请注意，即使此版本适用于您的示例案例，也尚不适合生产，并且在编写时还没有发现更多的边缘案例。

如果您想使用基于正则表达式的方法来解决此问题，建议您尝试some个NPM软件包中的these个，这些软件包提供了经过更多测试的正则表达式，用于在YouTube上查找YouTube视频的ID。链接。

它们可能无法直接解决您的问题，但却是编写更可靠的正则表达式的良好起点。

如何编写此正则表达式以仅替换url

2 个答案: