html截取域名字符

需求分析

在HTML或JavaScript中处理URL时，经常需要从完整链接中提取域名部分（如example.com），将https://www.example.com/path?query=1转换为example.com或www.example.com。

实现方法

以下是两种常见方案：

使用正则表达式截取

通过正则表达式匹配URL中的域名部分。

const url = “https://www.example.com:8080/path”;
const domain = url.match(regex)[1]; // 结果：example.com

| 3. 补充处理 | 统一大小写或去重 | `domain.toLowerCase();` |
---
# 2. 使用URL对象解析
利用浏览器内置的`URL`对象直接获取域名。
| 步骤 | 操作 | 代码示例 |
|----------|----------|--------------|
| 1. 创建URL对象 | 传入完整URL字符串 | `const urlObj = new URL("https://www.example.com/path");` |
| 2. 获取主机名 | 提取`hostname`属性 | `let domain = urlObj.hostname; // 结果：www.example.com` |
| 3. 可选处理 | 移除`www.`前缀 | `domain = domain.replace("www.", "");` |
---
 三、代码对比
| 方法 | 优点 | 缺点 | 适用场景 |
|----------|----------|----------|--------------|
| 正则表达式 | 灵活控制匹配规则 | 需手动处理复杂URL（如IP地址） | 需要自定义域名格式时 |
| URL对象 | 简单可靠，自动解析 | 依赖浏览器环境 | 现代浏览器中的标准处理 |
---
 四、常见问题与解答
# 问题1：如何处理带端口号的域名？
解答：  
使用正则表达式时，`(?::d+)?`会忽略端口号（如`:8080`）；若需保留端口号，可修改正则或直接使用`URL`对象的`host`属性（包含端口）。  
示例：  
```javascript
const url = "http://example.com:8080";
const hostWithPort = new URL(url).host; // 结果：example.com:8080

问题2：如何统一域名为小写？

解答：
域名不区分大小写，但实际存储可能包含大写字母，可通过toLowerCase()方法统一转换：

const domain = "ExAmPlE.COM";
console.log(domain.toLowerCase()); // 输出：example.com