如何用正则表达式正确匹配以反斜杠结尾的URL

作者：袖梨 2026-06-07

本文详解在 JavaScript 中编写可正确匹配 https://example.com 类型 URL 的正则表达式，重点解决因双重转义（字符串字面量 + 正则引擎）导致的匹配失效问题，并提供健壮、可读性强的替代方案。

本文详解在 javascript 中编写可正确匹配 `https://example.com` 类型 url 的正则表达式，重点解决因双重转义（字符串字面量 + 正则引擎）导致的 `` 匹配失效问题，并提供健壮、可读性强的替代方案。

在前端开发中，用正则表达式从 HTML 文本中提取 URL 是常见需求，但极易因转义规则理解偏差而失败。你遇到的问题——/.../g 在 regex101 上能匹配 https://de.wikipedia.org，但在浏览器中却只捕获到 https://de.wikipedia.org——根本原因在于 JavaScript 字符串字面量与正则引擎的双重转义机制。

? 为什么 / 实际匹配的是两个反斜杠？

当你写：

const regex = /https?://[w.-]+.[a-z]{2,}/g;

看似末尾 / 是“匹配一个反斜杠”，但 JS 引擎会先解析字符串字面量：正则字面量 /.../ 中的被解释为 单个字面量反斜杠字符 ，再交由正则引擎处理。而正则引擎要求匹配字面量时必须写成（即“反斜杠转义反斜杠”）。因此，要让正则最终匹配一个，你必须在字面量中写 \ —— 前两个解析为一个，后两个同样解析为一个，合起来 \ → 正则引擎收到 → 成功匹配单个。

✅ 正确写法（字面量形式）：

const regex = /https?://(?:[a-zA-Z0-9-]{1,63}.)+[a-zA-Z0-9-]{1,63}/g;// 注意末尾是  —— 这才是匹配单个  的正确写法

✅ 或使用 new RegExp() 构造（更直观，避免双重转义混淆）：

const regex = new RegExp('https?://(?:[a-zA-Z0-9-]{1,63}.)*[a-zA-Z0-9-]{1,63}\', 'g');// 字符串中需写 \，因为字符串解析阶段：\ → ，正则引擎再将  解释为字面量

✅ 推荐的健壮 URL 匹配正则（支持结尾）

以下正则兼顾准确性、可读性与实用性，严格遵循 DNS 域名规范（仅允许字母、数字、连字符，禁止开头/结尾连字符，TLD 长度不限）：

const urlWithBackslashRegex = /https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?.)+[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]/g;

说明：

https?：匹配 http 或 https；
://：字面量 ://（/ 在字面量中无需额外转义）；
(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?.)+：匹配合法子域名（如 www.、api.v2.），规避连续或首尾连字符；
[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]：匹配主域名/TLD（长度 1–63，不以 - 开头或结尾）；
：关键！ 字面量中两个反斜杠 → 正则引擎匹配单个字符；
g：全局匹配。

? 使用示例

const html = `  <div>    Visit https://de.wikipedia.org or try https://www.linuxfoundation.org/cookies    Also see http://test-site.co.uk and invalid: h00p://bad  </div>`;const regex = /https?://(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?.)+[a-zA-Z0-9][a-zA-Z0-9-]{0,61}[a-zA-Z0-9]/g;const matches = html.match(regex);console.log(matches);// → ["https://de.wikipedia.org", "https://www.linuxfoundation.org/cookies", "http://test-site.co.uk"]

⚠️ 重要注意事项

不要用 w 匹配域名：w 包含下划线 _ 和 Unicode 字母，而标准 ASCII 域名禁止下划线，且不推荐盲目匹配 Unicode（IDN 应使用 Punycode 处理）；
避免过度宽泛的量词：如 [.]+ 会错误匹配 example...com，应改为 .（单个点）；

innerHTML 不是可靠数据源：若目标是提取页面真实链接，优先使用 DOM API：

const urls = Array.from(document.querySelectorAll('a[href]'))  .map(el => el.href)  .filter(url => url.startsWith('http'));console.log(urls); // 精准、安全、无需正则