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

标签 javascript regex reactjs next.js

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

我想将 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> 中标签。

最佳答案

/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

关于javascript - React.js 从句子或段落中获取 Youtube 链接并将其转换为链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51926899/

相关文章:

reactjs - 有没有办法使 <TabbedShowLayout> 作为可编辑 View ?

javascript - 遍历列表中的对象并返回唯一值

Javascript 深度复制对象

javascript - 有条件 "not equal to a and not equal to b"等的 JS 简写吗?

javascript - 在逗号后跟任意数字后拆分字符串

javascript - 根据完整日历日 View 中的数据显示时段

javascript - 有没有java脚本网络爬虫框架

mysql - 提取字符串的数字部分并获取列中的最大值

regex - 在python中将相似的字符串分组为单个组

reactjs - setCount(prev => prev + 1) 和 setCount(count + 1) 有什么区别?