【JavaScript】URLの解析

ブラウザでのURLの解析方法はNode.jsの「WHATWG URL」と同じである。
このURLを解析するコードをNode.js v18.15.0で動かすとブラウザと同じ結果になることを確認した。

const url = 'https://user:pass@sub.example.com:8080/p/a/t/h?query=100&a=9#hash';
const myURL = new URL(url);
const whitespace = 2;
const result = [];
const names = [];

let stringLengthMax = 0;
let buf = ' ';
let blanks = '';

console.log("ブラウザでのURLの解析方法はNode.jsの「WHATWG URL」と同じである。");
console.log("このURLを解析するコードをNode.js v18.15.0で動かすとブラウザと同じ結果になることを確認した。");
console.log("");
console.log(myURL);
result.push(url);
result.push(myURL.href);
result.push(myURL.origin);
result.push(myURL.protocol);
result.push(myURL.username);
result.push(myURL.password);
result.push(myURL.host);
result.push(myURL.port);
result.push(myURL.hostname);
result.push(myURL.pathname);
result.push(myURL.hash);
result.push(myURL.search);

names.push("url");
names.push("href");
names.push("origin");
names.push("protocol");
names.push("username");
names.push("password");
names.push("host");
names.push("port");
names.push("hostname");
names.push("pathname");
names.push("hash");
names.push("search");

//names配列の中の文字列で最大長をstringLengthMaxに格納する。
names.forEach(t => {if(t.length > stringLengthMax) stringLengthMax = t.length;});

//bufに格納した文字列を「stringLengthMax + whitespace」回数分のコピーを含む新しい文字列を作る。
blanks = buf.repeat(stringLengthMax + whitespace);

//URLの解析結果を出す。
names.forEach((t, u) => (console.log(t + ':' + blanks.slice(t.length) + result[u])));

console.log("");

console.log("URLSearchParamsに含まれる値はforEach()メソッドで取り出し可能である。");
myURL.searchParams.forEach(function(value, key) {
  console.log(key + " = " + value);
});

/*

ブラウザでのURLの解析方法はNode.jsの「WHATWG URL」と同じである。
このURLを解析するコードをNode.js v18.15.0で動かすとブラウザと同じ結果になることを確認した。

URL { 
href: "https://user:pass@sub.example.com:8080/p/a/t/h?query=100&a=9#hash", 
origin: "https://sub.example.com:8080", 
protocol: "https:", 
username: "user", 
password: "pass", 
host: "sub.example.com:8080", 
hostname: "sub.example.com", 
port: "8080", 
pathname: "/p/a/t/h", 
search: "?query=100&a=9" 
}
​hash: "#hash"
host: "sub.example.com:8080"
hostname: "sub.example.com"
href: "https://user:pass@sub.example.com:8080/p/a/t/h?query=100&a=9#hash"
origin: "https://sub.example.com:8080"
password: "pass"
pathname: "/p/a/t/h"
port: "8080"
protocol: "https:"
search: "?query=100&a=9"
searchParams: URLSearchParams { query → "100", a → "9" }
username: "user"

url:       https://user:pass@sub.example.com:8080/p/a/t/h?query=100&a=9#hash
href:      https://user:pass@sub.example.com:8080/p/a/t/h?query=100&a=9#hash
origin:    https://sub.example.com:8080
protocol:  https:
username:  user
password:  pass
host:      sub.example.com:8080
port:      8080
hostname:  sub.example.com
pathname:  /p/a/t/h
hash:      #hash
search:    ?query=100&a=9

URLSearchParamsに含まれる値はforEach()メソッドで取り出し可能である。
query = 100
a = 9

*/

関連記事
【Node.js】URLの解析(「WHATWG URL」と「Legacy URL」)【2023年】 (attacktube.com)

参考
URL | Node.js v18.15.0 Documentation (nodejs.org) ExternalLink

• 
• Tweet

• JavaScript