JS获取url参数、主域名的方法实例分析

JS获取URL参数的方法实例分析

在前端开发中，经常需要获取URL中的参数，以便进行相应的逻辑处理。下面我们将介绍JS获取URL参数的方法。

方法一：正则表达式获取

常见的方法是通过正则表达式获取。

/**
 * @description 通过正则表达式获取URL中指定参数的值
 * @param {string} name 参数名
 * @param {string} url (可选)URL地址，默认为当前页面URL
 * @return {string} 参数值
 */
function getUrlParam(name, url) {
  var reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
  var u = url || window.location.search
  var r = u.substr(1).match(reg)
  if (r != null) {
    return unescape(r[2])
  }
  return null
}

该方法的实现原理是通过正则表达式匹配URL中的参数。其中^表示匹配开始符，&表示与下一参数的分隔符&，=表示参数名和参数值的分隔符，[^&]*表示匹配参数值，$表示匹配结束符，i表示忽略大小写。

示例：

假设有一个URL为http://www.example.com/index.html?key1=value1&key2=value2，通过以下代码可以获取参数key1的值。

var key1Value = getUrlParam('key1', 'http://www.example.com/index.html?key1=value1&key2=value2')
console.log(key1Value) // "value1"

方法二：URLSearchParams获取

在ES6中，我们可以直接使用URLSearchParams获取URL中的参数。

/**
 * @description 通过URLSearchParams获取URL中指定参数的值
 * @param {string} name 参数名
 * @param {string} url (可选)URL地址，默认为当前页面URL
 * @return {string} 参数值
 */
function getUrlParam2(name, url) {
  var u = url || window.location.search
  var params = new URLSearchParams(u)
  return params.get(name)
}

该方法的实现原理是通过URLSearchParams构造函数获取URL中的参数，并使用get方法获取指定参数的值。

示例：

假设有一个URL为http://www.example.com/index.html?key1=value1&key2=value2，通过以下代码可以获取参数key2的值。

var key2Value = getUrlParam2('key2', 'http://www.example.com/index.html?key1=value1&key2=value2')
console.log(key2Value) // "value2"

JS获取主域名的方法实例分析

在浏览器中，我们常常需要获取当前网站的主域名。下面我们将介绍JS获取主域名的方法。

方法一：正则表达式获取

常见的方法是通过正则表达式获取。

/**
 * @description 通过正则表达式获取URL中的主域名
 * @param {string} url (可选)URL地址，默认为当前页面URL
 * @return {string} 主域名
 */
function getDomain(url) {
  var u = url || window.location.href
  var domainReg = /^https?:\/\/([^/]+)/i
  var parts = u.match(domainReg);
  if (parts != null && parts.length >= 2) {
    return parts[1].replace(/^www\./, '')
  }
  return null
}

该方法的实现原理是通过正则表达式匹配URL中的主域名。

示例：

假设当前网站的URL为http://www.example.com/index.html，通过以下代码可以获取主域名example.com。

var domain = getDomain('http://www.example.com/index.html')
console.log(domain) // "example.com"

方法二：location对象获取

我们可以直接使用浏览器的location对象获取当前网站的主域名。

/**
 * @description 通过location对象获取URL中的主域名
 * @param {string} url (可选)URL地址，默认为当前页面URL
 * @return {string} 主域名
 */
function getDomain2(url) {
  var u = url || window.location.href
  var parts = u.match(/^(https?:\/\/)?([^/]+)/i);
  if (parts != null && parts.length >= 3) {
    var protocol = parts[1] ? parts[1].replace(/:$/, '') : '';
    var domainParts = parts[2].split('.');
    var domain = domainParts.slice(-2).join('.');
    if (domain === 'com.cn') {
      domain = domainParts.slice(-3).join('.');  // 处理.com.cn的情况
    }
    return protocol + '://' + domain;
  }
  return null
}

该方法的实现原理是通过location对象获取当前网址，并对URL进行解析得到主域名。

示例：

假设当前网站的URL为http://www.example.com/index.html，通过以下代码可以获取主域名example.com。

var domain2 = getDomain2('http://www.example.com/index.html')
console.log(domain2) // "http://example.com"