如何以用户友好的方式为输入的URL自动补充协议前缀

不用靠正则强制拦截用户输入要求带协议，完全可以在不增加用户操作成本的前提下解决相对路径跳转错误的问题，具体落地方式如下：

• 输入层只做弱引导，不做强报错：输入框占位提示直接写明「支持直接输入域名，系统将自动补全安全跳转协议」，用户输不带协议的地址时不会弹出普通人看不懂的格式错误提示。
• 生成链接时做自动补全逻辑，核心规则非常简单：
  1. 先对用户输入的内容做首尾去空格处理
  2. 校验处理后的内容开头是否已经携带合法跳转协议，包括http://、https://、mailto:、tel:、ftp://这类通用协议头，如果已经携带就直接使用原内容
  3. 未检测到协议头的内容，统一在开头拼接https://前缀即可，目前绝大多数公开站点都已支持HTTPS协议，默认补全HTTPS也能避免HTTP站点的安全告警问题
• 增加实时预览兜底：输入区域旁同步展示最终生成的可跳转链接效果，用户如果遇到极少数仅支持HTTP的特殊站点，可以手动补全http://前缀，系统会识别用户手动添加的协议，不会做强制覆盖。

核心处理逻辑的参考代码如下：

function formatExternalLink(rawInput) {
  const cleanInput = rawInput.trim()
  // 校验是否已携带合法协议头
  const hasValidProtocol = /^(https?:\/\/|mailto:|tel:|ftp:\/\/)/i.test(cleanInput)
  return hasValidProtocol ? cleanInput : `https://${cleanInput}`
}

// 逻辑验证
formatExternalLink('www.bing.com')      // 输出 https://www.bing.com
formatExternalLink('https://bing.com')  // 输出原内容 https://bing.com
formatExternalLink('http://test.site')  // 输出原内容 http://test.site

避坑提示：不要使用//开头的协议相对路径做默认补全，这类路径会匹配当前站点的访问协议，本地开发调试（通常为HTTP环境）时很容易出现资源加载、跳转异常问题，默认补全HTTPS是目前兼容性、安全性最优的选择。

这种方案比强制正则校验的体验好很多——普通用户大多不知道什么是HTTP协议前缀，弹出「请输入带http/https的合法链接」这类提示时，很多用户根本理解不了要怎么修改。而且本身URL的合法规则非常灵活，靠正则强校验很容易误杀部分格式特殊的合法地址，自动补全逻辑对用户完全无感知，不需要额外学习操作成本，配合实时预览兜底的容错率更高，几乎不会出现跳转错误的情况。

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