JavaScriptでURLのパラメータを判断して処理を変更する方法

Question

JavaScriptが分からないのでご教授お願いしたいのですが
JavaScriptでlocation.searchやlocation.hashを使った書き方でURLのパラメータを判断して処理を変更する方法がしりたいです。
アンカーリンクをクリックしたときにsample.htmlというリンクがあるとしたらクリックした時に?をつけてまたsample.html&1のように＆が含まれている場合は
処理をせずにそのままにするJavaScriptの書き方が知りたいです。

宜しくお願いします。

Answer 1

URL Standard

ただし、IE11- は未対応なので、Polyfill を適用する必要があります。

• 6.1. URL class - URL Standard （日本語訳）
• 6.2. URLSearchParams class - URL Standard （日本語訳）
• URL API - Can I use...
• URLSearchParams - Can I use...

'use strict';
var url1 = new URL('http://example.com/sample.html');
url1.searchParams.append('a', 1);
console.log(url1.toString()); // http://example.com/sample.html?a=1

var url2 = new URL('http://example.com/sample.html?a=1');
url2.searchParams.append('b', 2);
console.log(url2.toString());  // http://example.com/sample.html?a=1&b=2

GET パラメータの数を得る

拡張子だけで判断してhtml,phpという拡張子が付いてるときは?で＆を２個以上含んでる時のURLは何も処理をしないJavaScriptの書き方は出来ますでしょうか？

拡張子は URL#pathname を正規表現で切り出す事で得る事が可能です。

URLSearchParams は iterable なのでスプレッド要素(SpreadElement)で配列化すれば要素数を得られます。
(SpreadElement は多くのサイトでスプレッド演算子(spread operator)と説明されていますが、厳密には演算子に分類されません。)
ただし、SpreadElement は IE11- が未対応なので、IE11- が対象ブラウザに含まれるのなら、Babel 等のトランスコンパイラを使うか、Polyfill の機能に準じて下さい。

• spread (...) operator - ECMAScript 6 compatibility table
• 12.2.5Array Initializer - ECMAScript® 2016 Language Specification

var url3 = new URL('http://example.com/sample.html?a=1&b=2&c=3#d=4&e=5');
console.log(url3.pathname); // "/sample.html"
console.log([...url3.searchParams].length); // 3

Polyfill

• url polyfill - Google 検索

Re: satoru32 さん

Comments

[satoru32]

回答ありがとうございます！

[satoru32]

JavaScriptの書き方でvar url1 = new URL('http://example.com/sample.html');と書いてもらった
のですが拡張子だけで判断してhtml,phpという拡張子が付いてるときは?で＆を２個以上含んでる時のURLは何も処理をしないJavaScriptの書き方は出来ますでしょうか？

宜しくお願いいたします。

[think49]

親記事に追記しました。
丸投げは歓迎しないので、以降の質問は現状のコードを書いて新しく質問を立てる事をお勧めします。