如何用JavaScript处理URL提取去除前缀后的目标域名路径？

需求说明 #

需要从给定URL中移除http:///https://前缀，同时移除所有以www开头的子域名（包括www.、wwwtest.、www-test.这类），最终保留核心主机部分与后续路径。

输入示例 #

const value1 = 'https://localhost:4200/~';
const value2 = 'https://hoge.com/~';
const value3 = 'https://www.hoge.com/~';
const value4 = 'https://wwwtest.hoge.com/~';
const value5 = 'https://www-test.hoge.com/~';

期望输出 #

'localhost:4200/~'; //value1 
'hoge.com/~'; //value2
'hoge.com/~'; //value3
'hoge.com/~'; //value4
'hoge.com/~'; //value5

原方案问题分析 #

你使用的正则/^https?:\/\/|www.*\./g存在贪婪匹配问题：www.*\.会从www开始匹配到最后一个.，导致www.hoge.com中的www.hoge.被全部替换，最终只剩com/~，不符合预期。

解决方案 #

方案一：使用URL API（推荐） #

利用标准URL API解析URL，处理主机名后拼接端口与路径，这种方式更可靠，能覆盖更多边缘情况。

function getCleanUrl(value: string): string {
  const url = new URL(value);
  let hostname = url.hostname;
  
  // 匹配并移除开头的www类子域名
  const domainMatch = hostname.match(/^(www[\w-]*\.)?(.*)$/);
  if (domainMatch) {
    hostname = domainMatch[2] || hostname;
  }
  
  // 拼接端口（若存在）和路径
  const portSegment = url.port ? `:${url.port}` : '';
  return `${hostname}${portSegment}${url.pathname}`;
}

// 测试验证
const value1 = 'https://localhost:4200/~';
const value2 = 'https://hoge.com/~';
const value3 = 'https://www.hoge.com/~';
const value4 = 'https://wwwtest.hoge.com/~';
const value5 = 'https://www-test.hoge.com/~';

console.log(getCleanUrl(value1)); // localhost:4200/~
console.log(getCleanUrl(value2)); // hoge.com/~
console.log(getCleanUrl(value3)); // hoge.com/~
console.log(getCleanUrl(value4)); // hoge.com/~
console.log(getCleanUrl(value5)); // hoge.com/~

方案二：改进正则表达式 #

调整正则，避免贪婪匹配，仅匹配开头的www类子域名前缀：

function hogeReplace(value: string): string {
  // 匹配开头的http/https前缀，以及可选的www[\w-]*.子域名前缀
  return value.replace(/^https?:\/\/(www[\w-]*\.)?/, '');
}

// 测试验证
console.log(hogeReplace(value1)); // localhost:4200/~ 
console.log(hogeReplace(value2)); // hoge.com/~ 
console.log(hogeReplace(value3)); // hoge.com/~ 
console.log(hogeReplace(value4)); // hoge.com/~ 
console.log(hogeReplace(value5)); // hoge.com/~ 

正则说明：^https?:\/\/(www[\w-]*\.)? 中：

• ^https?:\/\/ 匹配开头的http://或https://
• (www[\w-]*\.)? 匹配可选的www开头子域名（支持wwwtest.、www-test.这类变体），仅匹配到第一个.为止，不会过度匹配。

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