如何解析文本中含空格文件名的链接？解决多格式链接拆分问题

问题 #

需要解析textarea中的文本链接，文本内的链接可能通过换行、空格或两者混合的方式分隔，但存在链接文件名包含空格的情况（例如 http://example.com/file (1).jpg）。现有代码会将所有空格替换为换行后拆分，导致带空格的链接被拆分为多个无效项，无法正确提取完整链接。

现有代码如下：

var linksArr = [];
var text = $("textarea[name=fileslist]").val();
if (text != undefined) {
   text = text.trim(); // remove spaces from start and end of text
   if (text != '') {
      text = text.split("\n"); // split by NEW LINE
      if (Array.isArray(text) && text.length) {
         for (var a = 0; a < text.length; a++) {
            var tLine = text[a].trim(); // trim again
            if (tLine != '') {
               tLine = tLine.replace(/\s+/g, '\n'); // replace spaces by New Line
               var listLines= tLine.split("\n"); // and splin by New Line Again
               if (Array.isArray(listLines) && listLines.length) {
                  // PROBLEM IS HERE
                  // push to array
               }
            }
         }
      }
   }
}
console.log(linksArr);

尝试过用encodeURI处理文本，但无法区分同行链接间的空格与链接内部的空格，寻求最优解决方案。

解决方案 #

核心思路是通过正则匹配完整URL，而非盲目按空格/换行拆分。利用URL的格式特征，直接识别出包含空格、括号等特殊字符的完整链接。

修改后的代码如下：

var linksArr = [];
var text = $("textarea[name=fileslist]").val();
if (text != undefined) {
    text = text.trim();
    if (text !== '') {
        // 匹配完整URL的正则：支持http/https开头，包含空格、括号等字符，直到下一个URL起始或文本结束
        const urlRegex = /https?:\/\/[^\s]+?(?=\s+(https?:\/\/)|$)/g;
        // 全局提取所有符合规则的链接
        linksArr = text.match(urlRegex) || [];
        // 清理每个链接首尾的多余空格
        linksArr = linksArr.map(link => link.trim());
    }
}
console.log(linksArr);

代码说明 #

• 正则/https?:\/\/[^\s]+?(?=\s+(https?:\/\/)|$)/g：
  • https?:\/\/：匹配http或https开头的链接
  • [^\s]+?：非贪婪匹配任意字符（包括链接内部的空格、括号），直到触发后续边界条件
  • (?=\s+(https?:\/\/)|$)：正向预查边界，匹配到"空格+新URL开头"或文本结束的位置，以此确定当前链接的结束点
• match()全局提取所有符合规则的链接，避免拆分带空格的有效链接
• map().trim()确保每个链接首尾无多余空格

扩展说明 #

如果需要支持更多协议（如ftp），可将正则开头改为(https?:\/\/|ftp:\/\/)；若链接包含其他特殊字符，可根据实际场景调整正则的匹配范围。

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