React.js 从句子或段落中获取 Youtube 链接并将其转换为链接答案

【问题标题】：React.js get Youtube link from a sentence or paragraph and convert it to a linkReact.js 从句子或段落中获取 Youtube 链接并将其转换为链接
【发布时间】：2019-01-26 08:33:13
【问题描述】：

我一直在网上浏览解决方案，但我得到的总是只有当用户只输入链接而不是句子/段落时。

我想将 youtube 视频的链接（当前是一个字符串）转换为一个链接。例如：

Watch this it's good! https://www.youtube.com/watch?v=<YT_ID_HERE> 到

Watch this it's good! <a href="https://www.youtube.com/watch?v=<YT_ID_HERE>">https://www.youtube.com/watch?v=<YT_ID_HERE></a>

我找到了一个，但问题在于用户粘贴了 2 个链接。

我正在制作一个用于学习目的的简单聊天应用程序。我也在使用 Next.js。

我想要一种方式、插件或包来执行此操作，但我更喜欢“方式”，因为我最终将使用链接生成 iframe 并使用那里的链接嵌入视频。

编辑：我希望它返回原始值，但将 youtube 链接包裹在 <a> 标记中。

【问题讨论】：

你看stackoverflow.com/questions/19377262/regex-for-youtube-url了吗？您需要为多行使用/gm 标志
对不起。我的意思是我希望它恢复原样，但将 youtube 链接包装到 <a> 标签。 match() 函数只返回与正则表达式匹配的那些，但我想要的是返回原始值，但 youtube 链接包含在 <a> 标记中。

标签： javascript regex reactjs next.js

【解决方案1】：

/https:\/\/www.[\/]*[A-z0-9.\/?=<>]*[\s]/gm

发给：watch this https://www.youtube.com/watch?v=<YT_ID_HERE> hello world

匹配：https://www.youtube.com/watch?v=<YT_ID_HERE>

This is a great regex writing tool

【讨论】：