首页 > 其他分享 >url链接中如果有两个问号会出现什么问题?如果通过js获取url的参数时能正常获取到吗?

url链接中如果有两个问号会出现什么问题?如果通过js获取url的参数时能正常获取到吗?

时间:2024-12-13 09:36:08浏览次数:4  
标签:value2 url param1 URL js 获取 param2 value1 问号

URL 中出现两个问号会导致一些问题,主要取决于第二个问号的位置。

情况一:第二个问号在片段标识符(fragment identifier)中

如果第二个问号出现在#后面,也就是片段标识符部分,则不会有任何问题。片段标识符用于指定页面中的特定位置,其内容由浏览器自行处理,并不会发送到服务器。因此,第二个问号会被视为片段标识符的一部分。

例如:https://www.example.com/page?param1=value1#section?param2=value2

在这个例子中,param2=value2 会被视为片段标识符的一部分,不会影响 URL 的其他部分。

情况二:第二个问号在查询字符串(query string)中

如果第二个问号出现在查询字符串中(?#之间,或者 URL 末尾),则第二个问号及其之后的内容会被大多数服务器和客户端视为 URL 的一部分,但其解释方式取决于具体的服务器和客户端实现。

  • 一些服务器/客户端可能会忽略第二个问号及其之后的内容。 它们可能只识别第一个问号和它后面的键值对。

  • 一些服务器/客户端可能会将第二个问号及其之后的内容视为查询字符串的一部分,但不会将其解析为键值对。 例如,它们可能会将整个字符串 ?param1=value1?param2=value2 视为一个键,其值为空。

  • 一些服务器/客户端可能会将第二个问号编码为 %3F 这在某些情况下可以避免歧义。

使用 JavaScript 获取 URL 参数时的影响

使用 JavaScript 获取 URL 参数时,如果 URL 中存在两个问号(在查询字符串部分),可能会导致一些问题:

  • URLSearchParams API: URLSearchParams API 通常会正确处理第一个问号及其后的参数,但可能会忽略或错误解释第二个问号后的内容。 最好先对 URL 进行处理,例如,只保留第一个问号及其后的部分,或者将第二个问号编码为 %3F

  • location.searchlocation.search 属性返回查询字符串部分(包括第一个问号)。 你需要自己解析这个字符串来获取参数值,并且需要处理第二个问号的情况,例如使用正则表达式或字符串分割。

最佳实践

为了避免歧义和潜在的问题,最好避免在 URL 的查询字符串部分使用两个问号。如果需要传递多个参数,请使用 & 符号连接它们:

https://www.example.com/page?param1=value1&param2=value2

示例代码 (JavaScript):

const url = new URL('https://www.example.com/page?param1=value1&param2=value2?param3=value3');
const params = new URLSearchParams(url.search);

console.log(params.get('param1')); // Output: value1
console.log(params.get('param2')); // Output: value2
console.log(params.get('param3')); // Output: null (or undefined, depending on the browser)


const url2 = 'https://www.example.com/page?param1=value1?param2=value2';
const params2 = new URLSearchParams(url2.substring(url2.indexOf('?') + 1)); //手动截取

console.log(params2.get('param1'));  // value1 (可能会根据浏览器实现不同)
console.log(params2.getAll('param1')); // 可能包含 value1?param2=value2,取决于浏览器如何处理
console.log(params2.get('param2'));  // null (或 undefined,或 value2,取决于浏览器)


// 更健壮的解析方法 (使用正则表达式):
function getQueryParams(url) {
  const params = {};
  const regex = /[?&]([^=#]+)=([^&#]*)/g;
  let match;
  while ((match = regex.exec(url))) {
    params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
  }
  return params;
}

const params3 = getQueryParams(url2);
console.log(params3.param1); // value1
console.log(params3.param2); // undefined (因为正则表达式只匹配第一个问号后的参数)

总之,虽然在片段标识符中使用第二个问号不会造成问题,但在查询字符串中使用它可能会导致意外行为。为了确保代码的可靠性和可预测性,最好避免在查询字符串中使用多个问号,并使用标准的 URL 编码方法。

标签:value2,url,param1,URL,js,获取,param2,value1,问号
From: https://www.cnblogs.com/ai888/p/18604157

相关文章

  • 132Java基于SpringBoot的西山区家政服务网站设计与开发-java vue.js idea
    所需该项目可以在最下面查看联系方式,为防止迷路可以收藏文章,以防后期找不到项目介绍132Java基于SpringBoot的西山区家政服务网站设计与开发-javavue.jsidea系统实现截图技术栈介绍JDK版本:jdk1.8+编程语言:java框架支持:springboot数据库:mysql......
  • 150Java基于SpringBoot的高校实验室管理系统微信小程序-java vue.js idea
    所需该项目可以在最下面查看联系方式,为防止迷路可以收藏文章,以防后期找不到项目介绍150Java基于SpringBoot的高校实验室管理系统设计与实现-javavue.jsidea系统实现截图技术栈介绍JDK版本:jdk1.8+编程语言:java框架支持:springboot数据库:mysql版本不限......
  • Z-BlogPHP 1.6.4.2135 版本中 zbp 的 fullcurrenturl 有一个 bug,如何修正?
    在Z-BlogPHP1.6.4.2135版本中,zbp 的 fullcurrenturl 功能存在一个bug。这个bug可能会导致生成的当前页面完整URL不正确,影响某些功能的正常使用。以下是修正此问题的方法和步骤:理解 fullcurrenturl 功能:fullcurrenturl 是Z-BlogPHP中用于获取当前页面完整URL......
  • jspssm基于javaweb的中药中草药商城 供求信息管理系统
    目录项目介绍具体实现截图开发核心技术:核心代码部分展示详细视频演示源码获取方式项目介绍整个中草药信息管理系统为了便于用户购买、管理员管理,采用了以下几大功能管理模块,包括管理员与用户、供应商的设计:用户用户只能做一些简单的操作,看看首页的中草药信息,以......
  • NodeJs-Buffer
    BufferBuffer(缓冲区)是一个类似于Array的对象,用于表示固定长度的字节序列Buffer本质是一段内存空间,专门用来处理二进制数据Buffer大小固定且无法调整Buffer性能较好,可以直接对计算机内存进行操作每个元素的大小为1字节(byte)创建Buffer使用alloc//创建一个长......
  • autoxjs使用app操作手机无需root-关闭应用
    文章目录主题代码问题主题autoxjs是一款开源app,可以用脚本操作手机。本文主要通过脚本来关闭某个应用,例如微信,已封装成一个方法,其中有个参数989为右边距的一个值,此值是我华为nova8Pro获取到的,可能不同手机不一样,用来获取当前展示应用是你要关闭的应用。网上搜到......
  • 数仓中的JSON串困扰了我,格式化Object转为 List 到底有多坑
    数仓中的JSON串困扰了我,格式化Object转为List到底有多坑曾经年少爱追梦,一心只想往前飞。最近在做报表的需求,中间数仓表存储的是大量的JSON字符串,处理起来真的是太过于繁琐,没有明确的POJO,可能是List<Map<…>>格式,完全是单个key单个key去取值。个人总结下其中的一些场景......
  • Slick/Slick.js使用方法(个人总结)/Slick.js介绍(转载,仅个人收藏使用)
    Slick/Slick.js使用方法(个人总结)/Slick.js介绍相比于Swiper而选择使用Slick.js的原因主要是因为其兼容不错并且在手机端的滑动效果更顺畅 官方参数介绍:官方地址参数类型默认值描述accessibility布尔值TRUE启用Tab键和箭头键导航adaptiveHeight布尔值FALSE......
  • CefSharp之C#与JS互相调用
    看了好些偏这类文章,但很多都是远古世界的代码,已经跑不通了,写个随笔,帮后面的人跳坑。 先上效果,界面丑不要在意这些细节   示例:简单粗暴,直接三二一上代码一、HTML代码<!DOCTYPEhtml><htmlstyle="overflow:hidden;"><head><title></title><linktype="......
  • 获取浏览器摄像头
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>CameraCapture</title>&......