首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取href多个参数值

在JavaScript中获取URL的href属性中的多个参数值,可以通过以下步骤实现:

基础概念

URL参数通常位于问号(?)之后,多个参数之间使用与号(&)分隔。例如,在URL https://example.com/page.html?param1=value1&param2=value2 中,param1param2 是参数名,value1value2 是对应的参数值。

获取多个参数值的方法

可以使用URLSearchParams接口来解析URL中的查询参数,这是一个简便且现代的方法。

示例代码

代码语言:txt
复制
// 假设当前页面的URL是 https://example.com/page.html?param1=value1&param2=value2

// 方法一:使用URLSearchParams
const params = new URLSearchParams(window.location.search);

// 获取单个参数值
const param1 = params.get('param1'); // "value1"
const param2 = params.get('param2'); // "value2"

// 如果需要获取所有同名参数的值(例如:?tag=javascript&tag=programming)
const allTags = params.getAll('tag'); // ["javascript", "programming"]

console.log(param1, param2, allTags);

// 方法二:手动解析
function getQueryParams() {
    const queryEnd = window.location.href.indexOf('?') + 1;
    const queryStart = window.location.href.indexOf('?', queryEnd) + 1;
    const queryEndIndex = window.location.href.indexOf('#', queryStart) || window.location.href.length;
    const query = window.location.href.substring(queryStart, queryEndIndex);
    const pairs = query.split('&');
    const params = {};

    for (const pair of pairs) {
        const [key, value] = pair.split('=').map(decodeURIComponent);
        if (params[key]) {
            if (Array.isArray(params[key])) {
                params[key].push(value);
            } else {
                params[key] = [params[key], value];
            }
        } else {
            params[key] = value;
        }
    }

    return params;
}

const queryParams = getQueryParams();
console.log(queryParams.param1, queryParams.param2);

应用场景

  • 单页应用(SPA):在路由跳转时传递参数。
  • 表单提交:获取用户提交的数据。
  • 分析用户行为:跟踪用户的来源和操作。

可能遇到的问题及解决方法

  1. 参数未定义:确保参数名正确,并且URL中确实包含该参数。
  2. 编码问题:使用decodeURIComponent来解码参数值。
  3. 同名参数:使用URLSearchParamsgetAll方法来获取所有同名参数的值。

优势

  • 简洁性URLSearchParams提供了简洁的API来处理查询参数。
  • 兼容性:现代浏览器都支持URLSearchParams,对于不支持的浏览器可以使用polyfill。

通过上述方法,你可以方便地在JavaScript中获取URL中的多个参数值,并根据需要进行处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Vue路由

    **params**.参数名 params后面的参数名要和动态路由配置的参数保持一致 两种传参数的方式区别 查询参数传参 (比较适合传多个参数) 跳转:to=”/path?...参数名=值&参数名2=值” 获取:$route.query.参数名 动态路由传参 (优雅简洁,传单个参数比较方便) 配置动态路由:path: “/path/:参数名” 跳转:to=”/path/参数值”...获取:$route.params.参数名 注意:动态路由也可以传多个参数,但一般只传一个 路由重定向 / 路由404 / 路由模式 路由重定向 网页打开时, url 默认是 / 路径,未匹配到组件时...$router.push({ path: '/路径/参数值' }) } } 接受参数的方式依然是:$route.params.参数值 name 命名路由跳转传参 (query传参..."#/article">面经 href="#/collect">收藏 href="#/like">喜欢 href="#/user

    23521

    web学习

    +Ajax js插件+代码性能优化 github+sea.js+require.js+gulp 2D+3D应用 多媒体技术+地理信息+本地存储 跨域操作+多线程+highcharts图表+bootstrap...[虚参列表]){函数体;} href="javascript:函数名()"> 事件类型 = “函数名()” 递归调用: 定义:在函数体内部调用函数自身 格式: function 函数名...image.png firstChild:获取元素的首个子节点 lastChild:获取元素的最后一个子节点 childNodes:获取元素的子节点列表 previousSibling:获取已知节点的前一个节点...image.png 存取数组元素: 单维数组 多维数组 特性: 数组长度是弹性的,下标从0开始 下标类型,数值,非数值 转为字符串,关联数组,下标将作为对象属性的名字 删除数组delete数组名...string中第n个字符的实际值 charCodeAt() 功能,返回字符串中第n个字符的代码 参数,超出范围,返回nan fromCharCode() 功能:根据字符编码创建字符串 参数,0个或多个整数

    2K30

    【玩转全栈】----Django制作部门管理页面

    Department.objects.filter(id=nid).delete() return redirect("/depart/list") def depart_edit(request,nid): # filter获取匹配的多个数据... 用户点击编辑后会获取点击行的id,并跳转到动态url 在视图函数中: 将获取到的nid传给视图函数,视图函数根据id获取改行数据,传给depart_edit.html,以将原数据显示到编辑页面...def depart_edit(request,nid): # filter获取匹配的多个数据,get获取一个 obj = Department.objects.filter(id=nid...前面的是直接构造了动态url,直接通过视图函数参数列表传参,ID 是作为 URL 的一部分传递给服务器的,不是查询参数。...key=value 通过 URL 路径传递信息,格式为 / 服务器端获取方式 使用 request.GET 获取参数值 使用 Django URL 配置中的路径参数获取 适用场景 通常用于过滤

    5200

    前端代码规范

    但尚不推荐使用 cale currentColor 等属性滚动容器都需加上 -webkit-overflow-scrolling: touch省略小于 1 时小数点前的 0,如 0.5px 改为 .5px 等若数值为...params,出参最好为 resDOM 元素都带有 $ 字样,如 $section $gradeId 等,推荐与其 ID 一致函数拓展配置的入参都名为 options,如 options.needAtuh...;已有代码可用包装器函数处理入参在链接中传参时,需对可能存在特殊字符的字符串进行 encodeURIComponent,比如 token redirect 等其他规范保存操作的接口统一用 post 请求...减少不必要的判断添加npm 命令不用 start serve 等作为启动命令的命名,推荐以 dev 为名id 推荐皆用字符串,数据字典皆用正整数时间戳可能会数字溢出,推荐使用字符串金钱相关乘以 100 后存储,获取时也是正整数...="/apple-touch-icon-57x57-precomposed.png" /> href=".

    17720

    WEB入门之十四 jQuery事件

    属性 说明 type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键,值1表示鼠标左键;值2表示鼠标中键;值...3表示鼠标右键 pageX/Y 获取事件发生时相对于页面的坐标 keyCode 获取在键盘事件中键盘对应的键值 screenX/Y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中...,或者多个元素同时共用一个事件处理函数等。...无参,表示移除元素上绑定的所有事件 $("p").die(); //移除段落元素的所有事件 2....无参,表示移除元素上绑定的所有事件 $("p").off(); //移除段落元素的所有事件 2.

    8110

    WEB入门之十四 jQuery事件

    属性​ ​说明​ type 获取事件类型 target 获取触发事件的元素 result 获取上一个事件处理函数返回的值 which 获取在鼠标单击事件中获取鼠标的按键,值1表示鼠标左键;值2表示鼠标中键...;值3表示鼠标右键 pageX/Y 获取事件发生时相对于页面的坐标 keyCode 获取在键盘事件中键盘对应的键值 screenX/Y 获取事件发生时相对于屏幕的坐标 data 事件发生时传递的参数的信息都保持在该属性中...,或者多个元素同时共用一个事件处理函数等。...无参,表示移除元素上绑定的所有事件 $("p").die(); //移除段落元素的所有事件 2....无参,表示移除元素上绑定的所有事件 $("p").off(); //移除段落元素的所有事件 2.

    12910

    SpringMVC

    st") public String testRequestMapping(){ return "success"; } *:表示任意的0个或多个字符 href="@{/tst}">测试...1、通过ServletAPI获取 将HttpServletRequest作为控制器方法的形参,此时HttpServletRequest类型的参数表示封装了当前请求的请求报文的对象 href...在控制器方法的形参位置,设置和请求参数同名的形参,当浏览器发送请求,匹配到请求映射时,在DispatcherServlet中就会将请求参数赋值给相应的形参 href="@{/testParam...,此时可以在控制器方法的形参中设置字符串数组或者字符串类型的形参接收此请求参数 href="@{/testParam(hobby='a',hobby='b')}">测试 若使用字符串数组类型的形参...,必须设置控制器方法的形参和请求参数同名,不同名则获取不到请求参数,通过@RequestParam注解可以实现不同名也可获取 @RequestParam是将请求参数和控制器方法的形参创建映射关系 @

    3.3K20

    Vue学习笔记(三)

    1.1 具名插槽 上面的例子中,有多个插槽,输入的文章头这段信息原本想插在第一个插槽里面的,但是会发现,它插到了所有的插槽中。 这个时候就需要使用具名插槽了。...具名插槽:如果在封装组件时需要预留多个插槽,则需要为每个插槽指定具体的名称。这种带有具体名称的插槽就叫”具名插槽”。 如果没有给插槽起名字,则插槽默认叫”default”。...为自定义指令动态绑定参数值 通过=的方式,为当前指令动态添加参数值,通过形参中的第二个参数binding来接收指令的参数值。...可以在展示的组件中,通过**$route.params 参数对象**得到参数值 获取参数的另一个方法,开启 props 传参 5.2.4 编程式导航 编程式导航:通过调用 API 方法实现导航的方式...,如通过location.href跳转到新页面的方式 声明式导航:点击链接实现导航的方式,如点击a 链接和点击 vue 项目中的router-link vue-router 中的编程式导航 API: $

    1.7K30

    JSP“三大请求传参方式”及“中文乱码问题解决方案”详解

    目录 一、访问请求参数的方法 二、form表单传参 中文乱码解决 三、网址或超链接传参 中文错误解决 四、JSP子动作传参 中文乱码解决 ---- Hello!...%> 接收界面效果: 中文乱码解决 如上我们可以看出,在我们传递了中文“张三”之后,在接收页面出现了乱码问题,解决办法如下: 1、在接收界面的代码中,在获取参数值之前增加如下代码...利用网址或超链接传参的格式如下: href=”超链接或网址?...参数名1=参数值1&参数名2=参数值2....”>点击跳转 传值界面代码:  href="myjsp.jsp?...Object是要保存的参数值,属于object类型, 使用上面的方法在传值页面进行请求转发之后,在接收页面使用getAttribute(“name”)方法就可以获取到name属性下的值,获取数据的方法格式如下

    3.2K10

    VUE2全家桶精讲

    $route.params.参数名 params后面的参数名要和动态路由配置的参数保持一致 2.查询参数传参 VS 动态路由传参 查询参数传参 (比较适合传多个参数) 跳转:to=“/path?...参数名=值&参数名2=值” 获取:$route.query.参数名 动态路由传参 (优雅简洁,传单个参数比较方便) 配置动态路由:path: “/path/:参数名” 跳转:to=“/path/参数值”...1.path路径跳转 query传参 this.$router.push('/路径?参数名1=参数值1&参数2=参数值2') this....参数1=参数值&参数2=参数值’) 动态路由传参 先改造路由 在传参 this....$route.query.id) } 七十九、面经基础版-动态路由传参 1.实现步骤 改造路由 动态传参 在详情页获取参数 2.代码实现 改造路由 router/index.js ...

    46510
    领券