如何用正则表达式替换HTML中的所有URL并转换为指定格式？

核心思路 #

要实现需求，需要分两步：

1. 用正则匹配HTML中指定标签（script、img、a）的src/href属性值；
2. 对捕获到的URL进行分类处理，拼接基准URL后套入目标格式https://example.org/?url=<处理后的URL>。

正则表达式 #

匹配目标属性的正则如下：

/(<(script|img|a)\s+(?:[^>]*?\s+)?(src|href)=["'])(.*?)(["'])/gi

各部分说明：

• <(script|img|a)\s+：匹配目标标签开头，捕获标签名；
• (?:[^>]*?\s+)?：非捕获组，匹配标签内其他可能的属性（非贪婪模式，避免过度匹配）；
• (src|href)=["']：匹配src或href属性及引号开头，捕获属性名；
• (.*?)：非贪婪捕获属性值（即需要处理的URL）；
• (["'])：匹配结束引号。

结合代码处理URL #

以JavaScript为例，通过replace方法的回调函数处理不同类型的URL：

const baseUrl = "https://example.com";
const targetPrefix = "https://example.org/?url=";
const rawHtml = `
<script src="scripts/something.js"/>
<img href="https://cdn.some_website.com/foo.jpg"/>
<a href="/hello">Hello world!</a>
`;

// 匹配正则
const linkRegex = /(<(script|img|a)\s+(?:[^>]*?\s+)?(src|href)=["'])(.*?)(["'])/gi;

const processedHtml = rawHtml.replace(linkRegex, (match, attrPrefix, tagName, _, url, quote) => {
  let fullUrl;
  // 分类处理URL
  if (/^https?:\/\//i.test(url)) {
    // 已为绝对HTTP/HTTPS URL，直接保留
    fullUrl = url;
  } else if (url.startsWith("/")) {
    // 根路径，拼接基准URL
    fullUrl = `${baseUrl}${url}`;
  } else {
    // 相对路径，拼接基准URL与路径
    fullUrl = `${baseUrl}/${url}`;
  }

  // 针对a标签的特殊嵌套处理（匹配你的示例需求）
  if (tagName === "a") {
    fullUrl = `${baseUrl.replace("https", "http")}/?url=${fullUrl}`;
  }

  // 拼接回完整的HTML属性
  return `${attrPrefix}${targetPrefix}${fullUrl}${quote}`;
});

console.log(processedHtml);

注意事项 #

1. 正则的局限性：如果HTML存在复杂结构（如属性值含转义引号、注释内的伪链接等），正则可能失效，此时建议使用专业HTML解析器（如DOMParser、cheerio）处理更可靠；
2. URL编码：若URL包含特殊字符（如空格、&等），建议用encodeURIComponent(fullUrl)替代直接拼接，避免生成无效URL；
3. 扩展标签/属性：如需匹配更多标签（如link、video）或属性，直接修改正则中的标签列表即可。

内容的提问来源于stack exchange，提问作者a human being