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

編集履歴

回答編集履歴

3

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

2021/09/15 14:41

投稿

think49
think49

スコア18194

answer CHANGED
@@ -4,22 +4,26 @@
4
4
 
5
5
  ```JavaScript
6
6
  'use strict';
7
- function isHttpUrlWithDomain (string) {
7
+ function sample1 (string) {
8
8
  const url = new URL(string);
9
9
 
10
10
  switch (url.protocol) {
11
11
  case 'https:':
12
12
  case 'http:':
13
+ const hostname = url.hostname;
13
- return url.hostname.includes('.');
14
+ const i = hostname.indexOf('.');
15
+ return i !== -1 && i !== 0 && i !== hostname.length - 1;
14
16
  }
15
-
17
+
16
18
  return false;
17
19
  }
18
20
 
19
- console.assert(isHttpUrlWithDomain('https://foo') === false);
20
- console.assert(isHttpUrlWithDomain('http://localhost') === false);
21
+ console.assert(sample1('http://localhost') === false);
22
+ console.assert(sample1('https://.foo') === false);
23
+ console.assert(sample1('https://bar.') === false);
21
- console.assert(isHttpUrlWithDomain('https://example.com') === true);
24
+ console.assert(sample1('http://example.com') === true);
25
+ console.assert(sample1('https://baz.example') === true);
22
- console.assert(isHttpUrlWithDomain('ftp://example.com') === false);
26
+ console.assert(sample1('ftp://example.com') === false);
23
27
  ```
24
28
 
25
29
  ### <input type="url">
@@ -46,9 +50,11 @@
46
50
  return input;
47
51
  })());
48
52
 
49
- console.assert(sample2('https://foo') === false);
50
53
  console.assert(sample2('http://localhost') === false);
54
+ console.assert(sample2('https://.foo') === false);
55
+ console.assert(sample2('https://bar.') === false);
51
- console.assert(sample2('https://example.com') === true);
56
+ console.assert(sample2('http://example.com') === true);
57
+ console.assert(sample2('https://baz.example') === true);
52
58
  console.assert(sample2('ftp://example.com') === false);
53
59
  ```
54
60
 
@@ -69,9 +75,11 @@
69
75
  return new RFC3986().isAbsoluteURI(string) && /https?://[^#?/.]+..+/.test(string);
70
76
  }
71
77
 
72
- console.assert(sample3('https://foo') === false);
73
78
  console.assert(sample3('http://localhost') === false);
79
+ console.assert(sample3('https://.foo') === false);
80
+ console.assert(sample3('https://bar.') === false);
74
- console.assert(sample3('https://example.com') === true);
81
+ console.assert(sample3('http://example.com') === true);
82
+ console.assert(sample3('https://baz.example') === true);
75
83
  console.assert(sample3('ftp://example.com') === false);
76
84
  </script>
77
85
  ```

2

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

2021/09/15 14:41

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,3 +1,7 @@
1
+ ### new URL
2
+
3
+ `new URL` を利用して検証。
4
+
1
5
  ```JavaScript
2
6
  'use strict';
3
7
  function isHttpUrlWithDomain (string) {
@@ -16,7 +20,60 @@
16
20
  console.assert(isHttpUrlWithDomain('http://localhost') === false);
17
21
  console.assert(isHttpUrlWithDomain('https://example.com') === true);
18
22
  console.assert(isHttpUrlWithDomain('ftp://example.com') === false);
23
+ ```
19
24
 
25
+ ### <input type="url">
26
+
27
+ `<input type="url">` を利用して検証。
28
+
29
+ - [4.10.5.1.4 URL状態（type=url） - HTML Standard 日本語訳](https://momdo.github.io/html/input.html#url-state-(type=url))
30
+
31
+ ```JavaScript
32
+ 'use strict';
33
+ const sample2 = ((baseInput)=>{
34
+ return function sample2 (string) {
35
+ const input = baseInput.cloneNode(false);
36
+ input.value = string;
37
+
38
+ return input.validity.valid;
39
+ };
40
+ })((()=>{
41
+ const input = document.createElement('input');
42
+
43
+ input.type = 'url';
44
+ input.pattern = 'https?://[^#?/.]+\..+';
45
+
46
+ return input;
47
+ })());
48
+
49
+ console.assert(sample2('https://foo') === false);
50
+ console.assert(sample2('http://localhost') === false);
51
+ console.assert(sample2('https://example.com') === true);
52
+ console.assert(sample2('ftp://example.com') === false);
20
53
  ```
21
54
 
55
+ ### 正規表現
56
+
57
+ 正規表現でも実装できますが、非常に複雑化する為、お勧めしません。
58
+ 簡略化を試みる場合は妥協が必要になります。
59
+
60
+ - [rfc3986.js - GitHub Gist](https://gist.github.com/think49/770087)
61
+
62
+ ```HTML
63
+ <script src="./rfc3986.js"></script>
64
+ <script>
65
+ 'use strict';
66
+ function sample3 (string) {
67
+ const rfc3986 = new RFC3986;
68
+
69
+ return new RFC3986().isAbsoluteURI(string) && /https?://[^#?/.]+..+/.test(string);
70
+ }
71
+
72
+ console.assert(sample3('https://foo') === false);
73
+ console.assert(sample3('http://localhost') === false);
74
+ console.assert(sample3('https://example.com') === true);
75
+ console.assert(sample3('ftp://example.com') === false);
76
+ </script>
77
+ ```
78
+
22
79
  Re: jjj001 さん

1

console.assert

2021/09/13 14:56

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,6 +1,6 @@
1
1
  ```JavaScript
2
2
  'use strict';
3
- function isHttpDomainUrl (string) {
3
+ function isHttpUrlWithDomain (string) {
4
4
  const url = new URL(string);
5
5
 
6
6
  switch (url.protocol) {
@@ -12,10 +12,11 @@
12
12
  return false;
13
13
  }
14
14
 
15
- console.log(isHttpDomainUrl('https://foo')); // false
15
+ console.assert(isHttpUrlWithDomain('https://foo') === false);
16
- console.log(isHttpDomainUrl('http://localhost')); // false
16
+ console.assert(isHttpUrlWithDomain('http://localhost') === false);
17
- console.log(isHttpDomainUrl('https://example.com')); // true
17
+ console.assert(isHttpUrlWithDomain('https://example.com') === true);
18
- console.log(isHttpDomainUrl('ftp://example.com')); // false
18
+ console.assert(isHttpUrlWithDomain('ftp://example.com') === false);
19
+
19
20
  ```
20
21
 
21
22
  Re: jjj001 さん