スニぺったん

無料のコードスニペットを掲載しています。言語ごとにコードスニペットを検索し、利用することが可能です。コードのライセンスはトップページをご覧ください。

  • JavaScript
  • URLクエリをパースしてオブジェクトに変換する関数 (parseURLQuery)

URLクエリをパースしてオブジェクトに変換する関数 (parseURLQuery)

総合評価: - 作成日: 2025-11-11

コメント:
Braveブラウザで動作確認済み

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>parseURLQuery</title>
    <script>
        /**
         * URLクエリをパースしてオブジェクトにして返す。
         * URLクエリは
         *
         *      ?aa=12&bb=34&cc=dd
         *
         * など、?で始まる文字列。
         * オプション parseNumber と parseBool で数字とブール文字列を
         * パースして値に変換するか指定可能。
         * 
         * url ... 文字列のURL
         * parseNumber ... 数字を数値に変換するならtrue
         * parseBool ... ブール文字列をブール値に変換するならtrue
         * 返り値 ... Object
         */
        function parseURLQuery (url, {
            parseNumber=false,
            parseBool=false,
        }={}) {
            let o = {}
            let query
            let m = url.match(/\?/)

            if (m) {
                query = url.slice(m.index+1)
            } else {
                return o
            }
            if (query === '') {
                return o
            }

            for (let param of query.split('&')) {
                let [key, val] = param.split('=')
                if (val == null) {
                    val = null
                }
                if (parseNumber) {
                    if (val.match(/[0-9]*\.[0-9]+/)) {
                        val = parseFloat(val)
                    } else if (val.match(/[0-9]+/)) {
                        val = parseInt(val)
                    }
                }
                if (parseBool) {
                    if (val === 'true') {
                        val = true
                    } else if (val === 'false') {
                        val = false
                    }
                }
                o[key] = val
            }

            return o
        }

        document.addEventListener('DOMContentLoaded', () => {
            let url, o

            url = 'http://localhost/?aa=12&bb=34&cc=dd'
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 3)
            console.assert(o['aa'] === '12')
            console.assert(o['bb'] === '34')
            console.assert(o['cc'] === 'dd')

            url = '?aa=12&bb=34&cc=dd'
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 3)
            console.assert(o['aa'] === '12')
            console.assert(o['bb'] === '34')
            console.assert(o['cc'] === 'dd')

            url = '/?aa=12&bb=34&cc=dd'
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 3)
            console.assert(o['aa'] === '12')
            console.assert(o['bb'] === '34')
            console.assert(o['cc'] === 'dd')

            url = '/?aa=12'
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 1)
            console.assert(o['aa'] === '12')

            url = '/?aa&bb'
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 2)
            console.assert(o['aa'] === null)
            console.assert(o['bb'] === null)

            url = '/?aa=&bb='
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 2)
            console.assert(o['aa'] === '')
            console.assert(o['bb'] === '')

            url = '?'
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 0)

            url = ''
            o = parseURLQuery(url)
            console.assert(Object.keys(o).length === 0)

            url = '/?aa=12&bb=3.14&cc=true&dd=false'
            o = parseURLQuery(url, {
                parseNumber: true,
                parseBool: true,
            })
            console.assert(Object.keys(o).length === 4)
            console.assert(o['aa'] === 12)
            console.assert(o['bb'] === 3.14)
            console.assert(o['cc'] === true)
            console.assert(o['dd'] === false)

            console.log('OK')
        })
    </script>
</head>
<body>

</body>
</html>