JS获取当前域名的几种方法详解

小蓝 • 2024-11-28 13:33 • 编程

在Web开发中，经常需要获取当前页面的域名，以方便进行相关操作。本文将介绍JS获取当前域名的几种方法，包括location对象、正则表达式和URLSearchParams等，帮助读者更好地理解JS获取域名的原理和方法。

一、location对象

location对象是JS中的一个内置对象，用于获取当前窗口的URL信息。其中，location.hostname属性可以获取当前页面的域名，具体代码如下：

  
    const domain = location.hostname;
    console.log("当前域名为：" + domain);

以上代码将输出当前页面的域名，例如：www.example.com。

需要注意的是，location.hostname只会返回域名信息，而不包括协议和端口号，如果需要获取完整的URL，需要结合其他属性使用，例如location.href。

二、正则表达式

正则表达式可以对字符串进行匹配和提取，通过正则表达式我们可以快速提取当前页面的域名信息。具体代码如下：

  
    const url = window.location.href;
    const reg = /^https?:\/\/([^/]+)/i;
    const domain = url.match(reg)[1];
    console.log("当前域名为：" + domain);

以上代码将获取当前页面的URL，通过正则表达式提取其中的域名信息并输出。

需要注意的是，正则表达式中的“^https?:\/\/”表示匹配以http或https开头的字符串，“([^/]+)”表示匹配除了“/”以外的任意字符。

三、URLSearchParams

URLSearchParams是JS中用于操作URL参数的内置对象，可以快速提取URL中的参数和值。在获取当前域名时，我们可以通过URLSearchParams获取当前URL中不包含参数的部分，即域名。具体代码如下：

  
    const url = new URL(window.location.href);
    const domain = url.origin;
    console.log("当前域名为：" + domain);

以上代码使用URL构造函数将当前页面的URL解析为一个URL对象，再通过URL对象的origin属性获取当前页面的域名信息，并输出。

四、判断协议和端口号

在实际开发中，经常需要根据当前页面的协议和端口号进行相关操作。我们可以通过location对象的protocol和port属性获取当前页面的协议和端口号。具体代码如下：

  
    const protocol = window.location.protocol;
    const port = window.location.port;
    console.log("当前协议为：" + protocol);
    console.log("当前端口号为：" + port);

以上代码将输出当前页面的协议和端口号信息，例如：http和80。

五、总结

本文介绍了JS获取当前域名的几种方法，包括location对象、正则表达式和URLSearchParams等。通过这些方法，我们可以在实际开发中更方便地获取当前页面的域名信息，并结合协议和端口号进行相关操作。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188677.html