teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

new URL

2020/09/24 01:01

投稿

think49
think49

スコア18194

answer CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  - [JavaScript - 複数サーバで動作するURLの判別をしたい|teratail](https://teratail.com/questions/293584)
6
6
 
7
- ### ルートディレクトリ
7
+ ### URL#hostname
8
8
 
9
9
  前提条件を下記として、
10
10
 
@@ -16,6 +16,8 @@
16
16
 
17
17
  hostnameの値に応じて、消費するディレクトリ数を可変して下さい。
18
18
 
19
+ - [URL.hostname - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/URL/hostname)
20
+
19
21
  ```JavaScript
20
22
  function toColorPathname (urlString) {
21
23
  const url = new URL(urlString);
@@ -29,4 +31,32 @@
29
31
  console.log(toColorPathname('https://kokyaku.net/piyo/index.html')); // "/color/piyo/index.html"
30
32
  ```
31
33
 
34
+ ### new URL()
35
+
36
+ 前章では、hostname(絶対パス)を得る形式でしたが、URLのインスタンスを持つ形式にしておくと、今後、URL関連の操作が必要になった際に拡張が楽になります。
37
+
38
+ ```JavaScript
39
+ 'use strict';
40
+ function toColorUrl (urlString) {
41
+ const url = new URL(urlString);
42
+ const map = new Map([['test.jp', 1],['kokyaku.net',0]]);
43
+
44
+ url.pathname = url.pathname.replace(new RegExp('^(/(?:[^/]*/){' + map.get(url.hostname) + '})'), '$1color/');
45
+ return url;
46
+ }
47
+
48
+ const srcList = ['https://test.jp/test/foo/index.html', 'https://test.jp/test2/bar/index.html', 'https://kokyaku.net/piyo/index.html'];
49
+ const colorList = ['https://test.jp/test/color/foo/index.html', 'https://test.jp/test2/color/bar/index.html', 'https://kokyaku.net/color/piyo/index.html'];
50
+ const resultList = [];
51
+
52
+ for (let src of srcList) {
53
+ resultList.push(toColorUrl(src));
54
+ }
55
+
56
+ console.log(JSON.stringify(colorList)); // ["https://test.jp/test/color/foo/index.html","https://test.jp/test2/color/bar/index.html","https://kokyaku.net/color/piyo/index.html"]
57
+ console.log(JSON.stringify(resultList)); // ["https://test.jp/test/color/foo/index.html","https://test.jp/test2/color/bar/index.html","https://kokyaku.net/color/piyo/index.html"]
58
+ console.assert(JSON.stringify(colorList) === JSON.stringify(resultList));
59
+ ```
60
+
61
+
32
62
  Re: meli さん

1

ルートディレクトリ

2020/09/24 01:01

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,5 +1,32 @@
1
+ ### 前質問
2
+
1
3
  前質問の回答をそのまま使えると思いますが、pathnameを覚えていますか。
2
4
 
3
5
  - [JavaScript - 複数サーバで動作するURLの判別をしたい|teratail](https://teratail.com/questions/293584)
4
6
 
7
+ ### ルートディレクトリ
8
+
9
+ 前提条件を下記として、
10
+
11
+ |環境|URL|ルートディレクトリ|
12
+ |:--|:--|:--|
13
+ |開発環境1|https://test.jp/test/|/test/|
14
+ |開発環境2|https://test.jp/test2/|/test2/|
15
+ |客用環境|https://kokyaku.net/|/|
16
+
17
+ hostnameの値に応じて、消費するディレクトリ数を可変して下さい。
18
+
19
+ ```JavaScript
20
+ function toColorPathname (urlString) {
21
+ const url = new URL(urlString);
22
+ const map = new Map([['test.jp', 1],['kokyaku.net',0]]);
23
+
24
+ return url.pathname.replace(new RegExp('^(/(?:[^/]*/){' + map.get(url.hostname) + '})'), '$1color/');
25
+ }
26
+
27
+ console.log(toColorPathname('https://test.jp/test/foo/index.html')); // "/test/color/foo/index.html"
28
+ console.log(toColorPathname('https://test.jp/test2/bar/index.html')); // "/test2/color/bar/index.html"
29
+ console.log(toColorPathname('https://kokyaku.net/piyo/index.html')); // "/color/piyo/index.html"
30
+ ```
31
+
5
32
  Re: meli さん