js 处理URL实用技巧

JS处理URL实用技巧

在前端开发中，我们经常需要对URL进行各种处理，例如从URL中提取参数、修改参数、获取当前页面URL等等。在本篇文章中，我们将探讨常用的JS处理URL实用技巧。

接收URL参数

我们可以使用window.location.search来获取URL中的查询参数，然后再用正则表达式或其他方法提取所需的参数。

function getUrlParam(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}

//示例
var id = getUrlParam('id'); //获取id参数的值
console.log(id);

此处的getUrlParam()函数接收一个参数name，然后使用正则表达式匹配URL中的查询参数，如果找到了name参数，则返回它的值；否则返回null。

更改URL参数

我们可以使用window.location.search来获取URL中的查询参数，然后再使用字符串替换等方法来修改所需的参数。

function setUrlParam(url, key, value){
  var urlObj = new URL(url);
  urlObj.searchParams.set(key,value)
  return urlObj.toString()
}

//示例
var url = 'https://www.example.com?name=alice&age=20';
var newUrl = setUrlParam(url, 'age', '18');
console.log(newUrl); //'https://www.example.com?name=alice&age=18'

此处的setUrlParam()函数接收三个参数：URL、要更改的参数的名称和更改后的参数值。函数使用URL对象解析URL，使用searchParams.set()方法更改指定参数的值，最后将新的URL返回。

获取当前页面URL

我们可以使用window.location.href来获取当前页面的URL。如果需要获取当前页面的其他部分，例如域名、协议、路径等，我们可以使用window.location对象的其他属性。例如：

console.log(window.location.href); //获取当前页面的完整URL
console.log(window.location.host); //获取当前页面的域名和端口号
console.log(window.location.protocol); //获取当前页面的协议
console.log(window.location.pathname); //获取当前页面的相对路径
console.log(window.location.origin); //获取当前页面的域名和协议

以上是常用的JS处理URL实用技巧，希望能帮助你更好地处理URL相关的问题。