如何使用 JavaScript 获取链接 URL11

在 JavaScript 中获取链接 URL 是一个常见且重要的任务，因为它使您能够使用链接的地址执行各种操作，例如导航、操作或验证链接的有效性。有几种方法可以在 JavaScript 中获取链接 URL，包括：

使用 属性

属性包含当前页面地址的字符串表示形式。您可以使用它来获取链接到的页面的 URL：
// 获取链接到的页面地址
const linkUrl = ;
(linkUrl);

复制代码

使用 () 方法

() 方法可用于获取元素的指定属性的值。对于链接，您可以使用它来获取 href 属性，该属性包含链接的 URL：
// 获取链接元素
const linkElement = ('a');
// 获取链接 URL
const linkUrl = ('href');
(linkUrl);

复制代码

使用 URL() 构造函数

URL() 构造函数可用于创建一个 URL 对象，该对象表示一个统一资源定位符 (URL)。您可以使用它来从链接元素中获取 URL：
// 获取链接元素
const linkElement = ('a');
// 创建一个 URL 对象
const url = new URL();
// 获取链接 URL
const linkUrl = ;
(linkUrl);

复制代码

获取相对 URL

有时您可能需要获取链接的相对 URL，而不是绝对 URL。相对 URL 不指定协议或主机名，而是指定从当前页面到目标页面的路径。要获取相对 URL，请使用 ('href') 方法并使用 URL() 构造函数解析结果：
// 获取链接元素
const linkElement = ('a');
// 获取链接的相对 URL
const relativeUrl = new URL(('href')).pathname;
(relativeUrl);

复制代码

处理特殊情况

在某些情况下，获取链接 URL 时您可能需要考虑特殊情况。例如：* 空链接：如果链接没有 href 属性，则 () 方法将返回 null。
* 锚链接：如果链接是锚链接（以 # 开头），则 属性将包含完整页面 URL，而 ('href') 方法将返回锚文本。
* 跨域链接：如果链接指向另一个域，则 属性将保持不变，而 ('href') 方法将返回完整 URL。

JavaScript 代码示例

以下是一些 JavaScript 代码示例，演示如何使用上面讨论的方法获取链接 URL：

获取绝对 URL

// 获取链接元素
const linkElement = ('a');
// 获取链接 URL
const linkUrl = ('href');
(linkUrl); // 输出：/

复制代码

获取相对 URL

// 获取链接元素
const linkElement = ('a');
// 获取链接的相对 URL
const relativeUrl = new URL(('href')).pathname;
(relativeUrl); // 输出：/

复制代码

处理空链接

// 获取链接元素
const linkElement = ('a');
// 检查链接是否有 href 属性
if (('href')) {
// 获取链接 URL
const linkUrl = ('href');
(linkUrl);
}

复制代码

处理锚链接

// 获取链接元素
const linkElement = ('a');
// 检查链接是否是锚链接
if (('href').startsWith('#')) {
// 获取锚文本
const anchorText = ('href').substring(1);
(anchorText);
} else {
// 获取链接 URL
const linkUrl = ('href');
(linkUrl);
}

复制代码

处理跨域链接

// 获取链接元素
const linkElement = ('a');
// 检查链接是否是跨域链接
if (new URL(('href')).origin !== ) {
// 获取跨域链接的绝对 URL
const linkUrl = ('href');
(linkUrl);
}

复制代码

通过使用上述技术，您可以在 JavaScript 中轻松获取链接 URL，并执行各种链接操作。

2024-12-04

---

上一篇：如何复制和共享推文关键词链接

下一篇：外部反向链接与内部链接在 SEO 中的重要性