javascript - 从 URL 获取信息并显示和隐藏 html 元素

Question

我正在尝试检查是否已运行搜索，以便我可以使用 JS 对此使用react，并根据页面加载隐藏和显示不同的 div。

我如何使用 JavaScript 和 Jquery 从 URL 获取信息？

www.localhost.com/search?name=&category=

我想获取名称和类别的信息然后如果它们不为空我想显示这个 div

<div class="Search-results"></div>

然后隐藏这个

<div class="Search-params"></div>

这可能吗？

Answer 1

本网站上的许多解决方案都是在较新的 URL API 之前完成的已实现并涉及解析字符串

使用 URL.searchParams，它有很多方法来获取、设置和迭代键和值，而无需解析字符串

const url =new URL('http://www.localhost.com/search?foo=bar&name=&category=')
const params = url.searchParams;

// check if 2 params exist and have values
if(!params.get('name') && !params.get('category')){
  console.log('name & category are empty or not available')
}
// output value of valid param
console.log('value of foo = ', params.get('foo'))

// add a new param and output updated href string
params.set('new-param', 123);
console.log('Updated url\n', url.href)

// loop through all params
for(let p of params){
   console.log('value of', p[0] , ' is ', p[1] || 'empty')
}