整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

干货:HTML中高效获取url的参数

avaweb

在我们平常的javaweb开发中,前台页面经常会用到获取url中的参数,大多数程序员可能直接

用window.location.href 获取到当前页面的url,然后再用substring去截取字符串,这样的话很麻烦。

当然我上面所说的是在html的文件中,如果你是用的jsp的话,那就很简单了。用el表达式我们可以很轻松的获取url中的参数:${param.paramName}

好了,言归正传,那如何在html中获取url中的参数了?

我们可以单独封装一个函数来达到这个目的。以后只要是要获取url的参数,直接调用这个函数就可以了。

function get_param(name, url){

if(!url) url = window.location.href;

name = name.replace(/[\[\]]/g,"\$&");

var regex =newRegExp("[?&]"+ name +"(=([^&#]*)|&|#|$)"),

results = regex.exec(url);

if(!results) return null;

if(!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g," "));

}

我在后续的文章中,会分享更多更实用的开发小技巧给大家,希望大家多多关注!

rl 解析

  const urlSearchParams = new URLSearchParams(window.location.search);
  const queryParams = Object.fromEntries(urlSearchParams.entries());
  console.log(queryParams);//成功转换成对象

注意看url中的查询值哦

Url 解析 知道query中的key直接获取对应的value

  const urlSearchParams = new URLSearchParams(window.location.search);
  const value = urlSearchParams.get("a");
  console.log(value);

拿来吧你

家好,我是大澈!

本文约 600+ 字,整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段优质 JS 代码片段,从而比以往更简单的从 URL 中获取查询参数。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

const getQueryByName = (name) => {
  const query = new URLSearchParams(location.search)
  return decodeURIComponent(query.get(name))
}
// url: https://sunday.com/?name=fatfish&age=100
const name = getQueryByName('name') // fatfish
const age = getQueryByName('age') // 100
const gender = getQueryByName('gender') // null


分享原因

这段代码通过 URLSearchParams 对象简化了从 URL 中获取查询参数的过程。

通过这种方法,可以更方便地在 JavaScript 中解析和获取 URL 查询参数,特别适用于处理需要从 URL 中提取参数的场景,比如读取用户在网页中的输入或搜索关键字等。

这是项目中一个很常见的操作,之前我们经常会使用 正则表达式 或者 拆分字符串 来完成,现在有了更简单的方式!

代码解析

1. const query = new URLSearchParams(location.search);

创建 URLSearchParams 对象。

URLSearchParams 是 Web API 的一部分,用于操作 URL 的查询字符串。

location.search 返回当前 URL 的查询字符串(例如 ?name=value&key=value)。

URLSearchParams 对象将其解析为一个可以操作的查询参数对象。

2. decodeURIComponent(query.get(name));

query.get(name) 方法从查询参数对象中获取名称为 name 的参数值。

decodeURIComponent 用于对参数值进行解码,以确保返回的值是一个人类可读的字符串,避免 URL 编码带来的问题(例如 %20 代表空格)。

- end -