如何实现仅为非YouTube URL生成锚点标签，同时将YouTube URL替换为iframe？

我来帮你搞定这个问题！你当前的代码逻辑顺序和匹配规则有两个核心问题：

1. 先把所有链接转换成锚点标签，之后再匹配YouTube链接时，目标URL已经被包裹在<a>标签里，正则很难精准匹配到原始URL，导致替换失效或混乱；
2. 普通链接的替换规则没有排除YouTube域名，两种替换逻辑会互相干扰。

修正后的函数代码 #

export const renderLinkWithText = (text = '') => {
  // 第一步：优先处理YouTube链接，精准匹配并替换为iframe
  let processedText = text.replace(
    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([\w-]+)/gim,
    '<iframe width="100%" height="350px" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>'
  );

  // 第二步：处理非YouTube的普通链接，排除YouTube域名后替换为锚点
  processedText = processedText.replace(
    /(\b(https?|ftp):\/\/(?!(www\.)?(youtube\.com|youtu\.be))[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim,
    '<a class="anchor_link" target="_blank" href="$1">$1</a> '
  );

  // 最后处理换行符
  return processedText.replace(/\n\r?/g, '<br />');
};

关键逻辑说明 #

• YouTube链接处理：
  正则调整为更精准的匹配规则，覆盖youtube.com/watch?v=xxx和youtu.be/xxx两种常见格式，捕获视频ID（$1）后替换为YouTube嵌入iframe，确保能匹配带/不带http:///www.的链接。
• 普通链接处理：
  在正则中加入负向预查(?!(www\.)?(youtube\.com|youtu\.be))，用来排除包含YouTube域名的链接，这样只会把剩下的HTTP/HTTPS/FTP链接转换成锚点标签，避免和YouTube的替换逻辑冲突。
• 顺序调整：
  先处理YouTube链接，再处理普通链接，确保原始URL在未被修改前就被正确匹配替换。

测试示例 #

输入文本：

Check out this funny video: https://youtu.be/dQw4w9WgXcQ
Here's a useful resource: https://developer.mozilla.org
Another YouTube link: https://www.youtube.com/watch?v=abc123xyz

输出结果（格式化后）：

Check out this funny video: <iframe width="100%" height="350px" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
<br />Here's a useful resource: <a class="anchor_link" target="_blank" href="https://developer.mozilla.org">https://developer.mozilla.org</a> 
<br />Another YouTube link: <iframe width="100%" height="350px" src="https://www.youtube.com/embed/abc123xyz" frameborder="0" allowfullscreen></iframe>

内容的提问来源于stack exchange，提问作者Hasham Minhas