URLの値によってセレクトボックスの初期値を変更したい

Question

前提・実現したいこと

wordpressにてターム別月別アーカイブを作成しました。

表示されるURLの値によってセレクトボックスの初期値を動的に変化させたいです。

セレクトボックス（日付）↓

<select id="date_link" onchange="location.href=value;">
    <option>月を選択</option>
    <option value="://example/news/date/2021/6">

        2021.6

    </option>
    <option value="://example/news/date/2021/5">

        2021.5

    </option>
    <option value="://example/news/date/2021/4">

        2021.4

    </option>
    <option value="://example/news/date/2021/2">

        2021.2

    </option>
    <option value="://example/news/date/2020/12">

        2020.12

    </option>
</select>

<script>
    window.addEventListener('pageshow', () => {

        document.querySelectorAll('#date_link option').forEach(x => {
            var a = Object.assign(document.createElement('a'), {
                href: x.value
            });
            if (location.href == a.href) {
                x.selected = true;
            };
        });
    });
</script>

試したこと

上記コードにより、URLとセレクトボックスのvalueが完全一致する場合には初期値が変更される様になりました。
（://example/news/date/2021/6のURLの時には2021.6が選択されている）

しかし、URLにパラメーターを振った場合には初期値は変更されず「<option>月を選択</option>」が選択されたままになっています。

例）「://example/news/date/2020/12/?news_category=news」
※タクソノミー(news_category)のターム（news）で記事を絞っています。

この場合には、valueと一致しないので、初期値は変更されません。
（本来は2020.12が初期値で選択される様にしたいです。）

完全一致ではなく、一部含まれている場合にはどの様にすれば良いでしょうか？

javascript部分でlocation.hrefをlocation.pathnameへ変更してみたのですが、それも上手く動かず、
ご存知の方がいらっしゃいましたらご教授いただけますと幸いです。

Comments

[hallen0225]

「完全一致」に対して、「部分一致」という用語があることはご存じでしょうか？？
「Javascript 文字列　部分一致」などで検索していただくと様々な記事がヒットするかと思います。

[kii.32]

ありがとうございます。
恥ずかしながら、部分一致について知りませんでした。一度調べてみます。

Answer 1

location.pathnameだとhostまたはhostnameの部分が抜けてしまうからではないでしょうか。

このページがわかりやすいです。
location.pathname－JavaScriptリファレンス

locationの各部分のうち必要ものを組み合わせて再合成するか、
もしくは?以降をざっくり除去しちゃえばいい気もします。
そうして残った文字列で、お尻に/が付いていたら、それも取る必要があるかもしれませんね。
locationから抽出した文字列と、比較したい文字列とを、どう正規化して比較するかの問題かと思います。

Comments

[kii.32]

ご回答ありがとうございます。
再合成したり、除去したりもできるのですね...
一度調べてお伝えさせていただきます。

Answer 2

記載ミスで動いていない様でした！
出力のvalueの値に/が一本抜けていて、それで完全一致していなかったため、動かなかったみたいです。

そのため、元々記載していた通りのコードで動きました。

<script> window.addEventListener('pageshow', () => { document.querySelectorAll('#date_link option').forEach(x => { var a = Object.assign(document.createElement('a'), { href: x.value }); if (location.href == a.href) { x.selected = true; }; }); }); </script>

回答いただきました方々、お手数おかけしてしまいました。