jQuery URL パラメータを取得する
今日の記事では、jQuery で URL パラメーターを取得する方法を学びます。
jQuery で URL パラメータを取得する
JavaScript では、Location インターフェイスの Search プロパティは検索文字列であり、クエリ文字列とも呼ばれます。つまり、? を含む文字列です。その後に URL パラメータが続きます。
最近のブラウザには URLSearchParams と URL.SearchParams があり、質問文字列パラメータの解析が難しくなりません。URLSearchParams インターフェースの get() テクニックは、指定された search パラメーターに関連付けられたプライマリ値を返します。
構文：
get(name)
次の簡単な例でそれを理解しましょう。
let dummyURL =
'https://delftstack.com/howto/jquery/?technology=jquery&post=urlParameter'
const extractURLParameter = (searchParam) => {
const searchPageURL = dummyURL.split('?')[1];
const searchURLVariables = searchPageURL.split('&');
let searchParameterName;
for (let i = 0; i < searchURLVariables.length; i++) {
searchParameterName = searchURLVariables[i].split('=');
if (searchParameterName[0] === searchParam) {
return searchParameterName[1] === undefined ?
true :
decodeURIComponent(searchParameterName[1]);
}
}
return false;
};
console.log(extractURLParameter('technology'));
console.log(extractURLParameter('post'));
const params =
new URLSearchParams(window.location.search); // pass the dummyURL here
const name = params.get('editor_console');
console.log(name)
上記の例では、現在の場所の URL から URL パラメーターを抽出する一般的な関数を定義しました。location インターフェース検索プロパティは、URL と ? で区切られた値からパラメーターを抽出します。
次のステップは、パラメータを&で分割することです。これで、各パラメーターを反復処理して、要求されたパラメーターが存在するかどうかを確認できます。
パラメータとキーは = で区切ることができます。
2 番目の方法は、URLSearchParams インターフェースを直接使用することです。これにより、すべてのクエリパラメーターのリストが提供されます。Get メソッドは、要求されたパラメーターに関連付けられた値を抽出します。
ブラウザが URLSearchParams をサポートしている場合、これは効率的なソリューションです。
jQuery をサポートするブラウザで上記のコードスニペットを実行してみてください。以下の結果が表示されます。
jquery
urlParameter
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn