teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問URLチェックについて

編集履歴

回答編集履歴

3

https://.foo と https://bar. をNG扱いに

2021/09/15 14:41

投稿

think49
think49

スコア18189

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  'use strict';
12
12
 
13
- function isHttpUrlWithDomain (string) {
13
+ function sample1 (string) {
14
14
 
15
15
  const url = new URL(string);
16
16
 
@@ -22,11 +22,15 @@
22
22
 
23
23
  case 'http:':
24
24
 
25
+ const hostname = url.hostname;
26
+
25
- return url.hostname.includes('.');
27
+ const i = hostname.indexOf('.');
28
+
29
+ return i !== -1 && i !== 0 && i !== hostname.length - 1;
26
30
 
27
31
  }
28
32
 
29
-
33
+
30
34
 
31
35
  return false;
32
36
 
@@ -34,13 +38,17 @@
34
38
 
35
39
 
36
40
 
37
- console.assert(isHttpUrlWithDomain('https://foo') === false);
41
+ console.assert(sample1('http://localhost') === false);
38
42
 
39
- console.assert(isHttpUrlWithDomain('http://localhost') === false);
43
+ console.assert(sample1('https://.foo') === false);
40
44
 
41
- console.assert(isHttpUrlWithDomain('https://example.com') === true);
45
+ console.assert(sample1('https://bar.') === false);
42
46
 
47
+ console.assert(sample1('http://example.com') === true);
48
+
49
+ console.assert(sample1('https://baz.example') === true);
50
+
43
- console.assert(isHttpUrlWithDomain('ftp://example.com') === false);
51
+ console.assert(sample1('ftp://example.com') === false);
44
52
 
45
53
  ```
46
54
 
@@ -94,11 +102,15 @@
94
102
 
95
103
 
96
104
 
97
- console.assert(sample2('https://foo') === false);
98
-
99
105
  console.assert(sample2('http://localhost') === false);
100
106
 
107
+ console.assert(sample2('https://.foo') === false);
108
+
109
+ console.assert(sample2('https://bar.') === false);
110
+
101
- console.assert(sample2('https://example.com') === true);
111
+ console.assert(sample2('http://example.com') === true);
112
+
113
+ console.assert(sample2('https://baz.example') === true);
102
114
 
103
115
  console.assert(sample2('ftp://example.com') === false);
104
116
 
@@ -140,11 +152,15 @@
140
152
 
141
153
 
142
154
 
143
- console.assert(sample3('https://foo') === false);
144
-
145
155
  console.assert(sample3('http://localhost') === false);
146
156
 
157
+ console.assert(sample3('https://.foo') === false);
158
+
159
+ console.assert(sample3('https://bar.') === false);
160
+
147
- console.assert(sample3('https://example.com') === true);
161
+ console.assert(sample3('http://example.com') === true);
162
+
163
+ console.assert(sample3('https://baz.example') === true);
148
164
 
149
165
  console.assert(sample3('ftp://example.com') === false);
150
166
 

2

<input type="url">、正規表現

2021/09/15 14:41

投稿

think49
think49

スコア18189

test CHANGED
@@ -1,3 +1,11 @@
1
+ ### new URL
2
+
3
+
4
+
5
+ `new URL` を利用して検証。
6
+
7
+
8
+
1
9
  ```JavaScript
2
10
 
3
11
  'use strict';
@@ -34,7 +42,113 @@
34
42
 
35
43
  console.assert(isHttpUrlWithDomain('ftp://example.com') === false);
36
44
 
45
+ ```
37
46
 
47
+
48
+
49
+ ### <input type="url">
50
+
51
+
52
+
53
+ `<input type="url">` を利用して検証。
54
+
55
+
56
+
57
+ - [4.10.5.1.4 URL状態（type=url） - HTML Standard 日本語訳](https://momdo.github.io/html/input.html#url-state-(type=url))
58
+
59
+
60
+
61
+ ```JavaScript
62
+
63
+ 'use strict';
64
+
65
+ const sample2 = ((baseInput)=>{
66
+
67
+ return function sample2 (string) {
68
+
69
+ const input = baseInput.cloneNode(false);
70
+
71
+ input.value = string;
72
+
73
+
74
+
75
+ return input.validity.valid;
76
+
77
+ };
78
+
79
+ })((()=>{
80
+
81
+ const input = document.createElement('input');
82
+
83
+
84
+
85
+ input.type = 'url';
86
+
87
+ input.pattern = 'https?://[^#?/.]+\..+';
88
+
89
+
90
+
91
+ return input;
92
+
93
+ })());
94
+
95
+
96
+
97
+ console.assert(sample2('https://foo') === false);
98
+
99
+ console.assert(sample2('http://localhost') === false);
100
+
101
+ console.assert(sample2('https://example.com') === true);
102
+
103
+ console.assert(sample2('ftp://example.com') === false);
104
+
105
+ ```
106
+
107
+
108
+
109
+ ### 正規表現
110
+
111
+
112
+
113
+ 正規表現でも実装できますが、非常に複雑化する為、お勧めしません。
114
+
115
+ 簡略化を試みる場合は妥協が必要になります。
116
+
117
+
118
+
119
+ - [rfc3986.js - GitHub Gist](https://gist.github.com/think49/770087)
120
+
121
+
122
+
123
+ ```HTML
124
+
125
+ <script src="./rfc3986.js"></script>
126
+
127
+ <script>
128
+
129
+ 'use strict';
130
+
131
+ function sample3 (string) {
132
+
133
+ const rfc3986 = new RFC3986;
134
+
135
+
136
+
137
+ return new RFC3986().isAbsoluteURI(string) && /https?://[^#?/.]+..+/.test(string);
138
+
139
+ }
140
+
141
+
142
+
143
+ console.assert(sample3('https://foo') === false);
144
+
145
+ console.assert(sample3('http://localhost') === false);
146
+
147
+ console.assert(sample3('https://example.com') === true);
148
+
149
+ console.assert(sample3('ftp://example.com') === false);
150
+
151
+ </script>
38
152
 
39
153
  ```
40
154
 

1

console.assert

2021/09/13 14:56

投稿

think49
think49

スコア18189

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  'use strict';
4
4
 
5
- function isHttpDomainUrl (string) {
5
+ function isHttpUrlWithDomain (string) {
6
6
 
7
7
  const url = new URL(string);
8
8
 
@@ -26,13 +26,15 @@
26
26
 
27
27
 
28
28
 
29
- console.log(isHttpDomainUrl('https://foo')); // false
29
+ console.assert(isHttpUrlWithDomain('https://foo') === false);
30
30
 
31
- console.log(isHttpDomainUrl('http://localhost')); // false
31
+ console.assert(isHttpUrlWithDomain('http://localhost') === false);
32
32
 
33
- console.log(isHttpDomainUrl('https://example.com')); // true
33
+ console.assert(isHttpUrlWithDomain('https://example.com') === true);
34
34
 
35
- console.log(isHttpDomainUrl('ftp://example.com')); // false
35
+ console.assert(isHttpUrlWithDomain('ftp://example.com') === false);
36
+
37
+
36
38
 
37
39
  ```
38
40