React Native中URL转锚点/YouTube转Iframe及空白问题解决

需求描述 #

• 普通URL转换为带完整链接文本的<a>标签，示例：<a href="https://www.google.com">https://www.google.com</a>
• 各类YouTube URL（youtube.com、youtu.be等）转换为指定宽高的<iframe>标签，示例：<iframe width="420" height="315" src="https://youtu.be/75Dhfjf6hfjfj"></iframe>

初始尝试及问题 #

最初用以下正则实现，但效果不符合预期：

const redExpYoutube = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|\?v=|watch\?v=|&v=)([^#&?]*).*/;
const regExpUrl = /(www+\.)?(?!youtube?!youtu.be)([\w-]+s{0,3})[\/\.,;:!]{1,3}\s{0,3}(r[o0]|n[e3]t|lt|c[o0]m|[i!]nf[o0]|[o0]rg|b[i!][z2]|ru|[e3]du)(\/)?/g;

embeddedString = str.replace(regExpUrl, "<a style='text-decoration:underline;color:red;' href='$1' target='_blank'>$1</a>");
embeddedString = embeddedString.replace(redExpYoutube, "<iframe src='https://$1$2/$3'></iframe>");
embeddedString = embeddedString.replace(/<[\/]{0,1}(div)[^><]*>/g,"");

更新业务场景 #

URL可能被<div>、<span>等HTML元素包裹，示例输入：

str = `
            <div>https://www.google.com</div>
            <div><span>http://google.com</span></div>
            <div>https://www.youtube.com/live/gNIQWYgf-0</div>
            <div>https://www.youtube.com/embed/3ul2LYG6j14?si=fgxYHjyt6zBmoYEr</div>
            <div>https://youtu.be/75Dhfjf6hfjfj</div>
            this also has to take into account the variations of different youtube urls

      `

改用convertLinks函数处理，但出现新问题：

const convertLinks = ( input ) => {
    let text = input;
    const linksFound = text.match( /(?:www|http?|https?)[^\s]+/g );
    const aLink = [];
    console.log(linksFound);
    if ( linksFound != null ) {
      for ( let i=0; i<linksFound.length; i++ ) {
        let replace = linksFound[i];
        if ( !( linksFound[i].match( /(http(s?)):\/\/ ) ) ) { replace = 'http://' + linksFound[i] }
        let linkText = replace.split( '/' )[2];
        if ( linkText.substring( 0, 3 ) == 'www' ) { linkText = linkText.replace( 'www.', '' ) }
        if ( linkText.match( /youtu/ ) ) {
          let youtubeID = replace.split( '/' ).slice(-1)[0];
          aLink.push( '<div class="video-wrapper"><iframe src="https://www.youtube.com/embed/' + youtubeID + '" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>' )
        }
        else if ( linkText.match( /vimeo/ ) ) {
          let vimeoID = replace.split( '/' ).slice(-1)[0];
          aLink.push( '<div class="video-wrapper"><iframe src="https://player.vimeo.com/video/' + vimeoID + '" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>' )
        }
        else {
          aLink.push( '<a href="' + replace + '" target="_blank">' + linkText + '</a>' );
        }
        text = text.split( linksFound[i] ).map(item => { return aLink[i].includes('iframe') ? item.trim() : item } ).join( aLink[i] );
      }
      return text;
    }
    else {
      return input;
    }
  }

当前问题 #

URL匹配拼接后，转换结果残留大量空白字符，示例输出：

["http://www.google.com", "https://youtu.be/75fDo2yk6RM?si=QxkLmcT_TiIgHiTf"]
  <a href="http://www.google.com" target="_blank">google.com</a> 
  <div class="video-wrapper"><iframe src="https://www.youtube.com/em
  
    
  
  ---all this empty space---
  
    
  
 
  
                                                                                                                                      
   mbed/75fDo2yk6RM?si=QxkLmcT_TiIgHiTf" frameborder="0" 
   allow="accelerometer; autoplay; encrypted-media; gyroscope; 
   picture-in-picture" allowfullscreen></iframe></div>

解决方案 #

1. 核心优化方向 #

• 全局清理输入输出的多余空白字符
• 修正YouTube视频ID的提取逻辑（避免把参数当成ID的一部分）
• 统一字符串替换逻辑，避免局部trim导致的空白残留
• 确保普通URL的链接文本为完整URL，符合需求示例

修正后的代码 #

const convertLinks = (input) => {
  // 先清理输入中的多余换行、连续空白
  let text = input.replace(/\s+/g, ' ').trim();
  
  // 匹配所有合法URL（带http/https或www前缀）
  const linksFound = text.match(/(https?:\/\/|www\.)[^\s]+/g);
  if (!linksFound) return text;

  // 逐个处理匹配到的链接
  linksFound.forEach(link => {
    let fullUrl = link.startsWith('http') ? link : `https://${link}`;
    let processedElement = '';

    // 处理YouTube链接：提取纯净视频ID
    const youtubeMatch = fullUrl.match(/(youtu\.be\/|youtube\.com\/(watch\?v=|embed\/|live\/))([^&?#]+)/);
    if (youtubeMatch) {
      const videoId = youtubeMatch[3];
      processedElement = `<div class="video-wrapper"><iframe width="420" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
    } 
    // 处理Vimeo链接
    else if (fullUrl.includes('vimeo.com')) {
      const vimeoId = fullUrl.split('/').pop().split('?')[0];
      processedElement = `<div class="video-wrapper"><iframe src="https://player.vimeo.com/video/${vimeoId}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>`;
    } 
    // 处理普通URL：使用完整URL作为链接文本
    else {
      processedElement = `<a href="${fullUrl}" target="_blank">${fullUrl}</a>`;
    }

    // 替换原链接，同时清理链接前后的空白
    text = text.replace(new RegExp(`\\s*${link}\\s*`, 'g'), ` ${processedElement} `);
  });

  // 最后再清理一次多余空白
  return text.replace(/\s+/g, ' ').trim();
};

代码说明 #

• 输入阶段先做全局空白归一化，把所有连续空白、换行替换为单个空格并去除首尾空白
• 优化YouTube ID提取逻辑，从各种链接格式中精准提取不带参数的视频ID
• 替换链接时，用正则匹配链接前后的所有空白，统一替换为单个空格，彻底避免空白残留
• 普通URL的链接文本改为完整URL，严格符合需求示例要求

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