# 如何在HTML中獲取問號后的值
在Web開發中，經常需要從URL中提取參數（即問號`?`后的鍵值對）。本文將介紹幾種常用的方法來實現這一需求。
---
## 一、URL參數的基本結構
URL參數通常以`?`開頭，多個參數用`&`連接，格式如下：
https://example.com/page?key1=value1&key2=value2
---
## 二、原生JavaScript方法
### 1. 使用`URLSearchParams` API（現代瀏覽器支持）
```javascript
const urlParams = new URLSearchParams(window.location.search);
const value1 = urlParams.get('key1'); // 獲取key1的值
const value2 = urlParams.getAll('key2'); // 獲取所有同名參數（數組）
function getQueryParam(key) {
const query = window.location.search.substring(1);
const pairs = query.split('&');
for (const pair of pairs) {
const [k, v] = pair.split('=');
if (k === key) return decodeURIComponent(v);
}
return null;
}
如果項目中已引入jQuery，可以使用以下方式：
// 需要引入jQuery插件或自行實現
$.urlParam = function(name) {
const results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
return results ? results[1] : null;
};
通過this.$route.query（Vue Router）：
// 獲取所有參數對象
this.$route.query.key1
使用react-router的useSearchParams：
import { useSearchParams } from 'react-router-dom';
function MyComponent() {
const [searchParams] = useSearchParams();
const value = searchParams.get('key1');
}
app.get('/page', (req, res) => {
const value1 = req.query.key1;
// ...
});
const url = require('url');
const querystring = require('querystring');
const parsedUrl = url.parse(req.url);
const params = querystring.parse(parsedUrl.query);
=或&等特殊字符，需使用encodeURIComponent/decodeURIComponent處理?color=red&color=blue）需要特殊處理#后的內容）混淆<!DOCTYPE html>
<html>
<body>
<script>
document.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
document.getElementById('result').innerText =
`當前參數: key1=${params.get('key1')}`;
});
</script>
<div id="result"></div>
</body>
</html>
通過以上方法，開發者可以靈活地在不同場景下獲取URL參數?，F代瀏覽器推薦使用URLSearchParams，傳統項目可選擇字符串處理，而框架項目則優先使用路由提供的API。
“`
（全文約700字）
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
