teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問javascriptでURLを連結させる方法

編集履歴

質問編集履歴

7

誤字の修正

2018/01/02 08:49

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- javascriptでURLを合体させる方法
1
+ javascriptでURLを連結させる方法
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ###■やりたいこと
2
2
 
3
- 表示中のURLの前に、別のURLを挿入して、合体させたいです。
3
+ 表示中のURLの前に、別のURLを挿入して、連結させたいです。
4
4
 
5
5
 
6
6
 
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- ・合体させたURL
19
+ ・連結させたURL
20
20
 
21
21
  「https://B.com?param=https://A.com/xxx」
22
22
 
@@ -24,7 +24,7 @@
24
24
 
25
25
  ###■現状のコード
26
26
 
27
- javascriptで次のように書いても、なぜか合体できません。
27
+ javascriptで次のように書いても、なぜか連結できません。
28
28
 
29
29
  [https://jsfiddle.net/he8sgh29/](https://jsfiddle.net/he8sgh29/)
30
30
 

6

誤字の修正

2018/01/02 08:49

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,13 +26,23 @@
26
26
 
27
27
  javascriptで次のように書いても、なぜか合体できません。
28
28
 
29
- [https://jsfiddle.net/7uxond8c/2/](https://jsfiddle.net/7uxond8c/2/)
29
+ [https://jsfiddle.net/he8sgh29/](https://jsfiddle.net/he8sgh29/)
30
30
 
31
31
  ```php
32
32
 
33
- <!-- 表示されているURL -->
33
+ <head>
34
34
 
35
+ <!-- jQueryの読み込み -->
36
+
37
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
38
+
39
+ </head>
40
+
41
+
42
+
43
+ <!-- 表示されてるURL -->
44
+
35
- <div class="linka">https://A.com/xxx/</div>
45
+ <div class="urltext">https://A.com/xxx/</div>
36
46
 
37
47
 
38
48
 
@@ -42,7 +52,7 @@
42
52
 
43
53
 
44
54
 
45
- <!-- jQueryによる処理 -->
55
+ <!-- jQuery -->
46
56
 
47
57
  <script>
48
58
 
@@ -50,13 +60,13 @@
50
60
 
51
61
 
52
62
 
53
- // テキストフォームを監視して入力があるたびに実行
63
+ // 表示されてるURLのクラスを指示して
54
64
 
55
- $('.linka').on('input change', function() {
65
+ $('.urltext').on("load",function(){
56
66
 
57
67
 
58
68
 
59
- // テキストを取得
69
+ // URLを取得して
60
70
 
61
71
  var param = $(this).val();
62
72
 
@@ -76,8 +86,6 @@
76
86
 
77
87
  </script>
78
88
 
79
-
80
-
81
89
  ```
82
90
 
83
91
 

5

リンク先修正

2018/01/02 08:14

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  javascriptで次のように書いても、なぜか合体できません。
28
28
 
29
- [https://jsfiddle.net/7uxond8c/1/](https://jsfiddle.net/7uxond8c/1/)
29
+ [https://jsfiddle.net/7uxond8c/2/](https://jsfiddle.net/7uxond8c/2/)
30
30
 
31
31
  ```php
32
32
 

4

質問の適正化

2018/01/02 07:46

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- 表示中のURLの前に、ｊｓを使って別のURLを挿入したい。
1
+ javascriptでURLを合体させる方法
test CHANGED
@@ -12,132 +12,76 @@
12
12
 
13
13
  ・別のURL
14
14
 
15
- 「https://B.com&url=」
15
+ 「https://B.com?param=」
16
16
 
17
17
 
18
18
 
19
- ・合体したURL
19
+ ・合体させたURL
20
20
 
21
- 「https://B.com&url=https://A.com/xxx」
21
+ 「https://B.com?param=https://A.com/xxx」
22
22
 
23
23
 
24
24
 
25
- ###■現状
25
+ ###■現状のコード
26
26
 
27
- javascriptで、上の完成させたいURLを**テキストで表示**というのはできました。
27
+ javascriptで次のように書いても、なぜか合体できません。
28
28
 
29
- [https://jsfiddle.net/ddvLf0yp/1/](https://jsfiddle.net/ddvLf0yp/1/)
29
+ [https://jsfiddle.net/7uxond8c/1/](https://jsfiddle.net/7uxond8c/1/)
30
30
 
31
31
  ```php
32
32
 
33
+ <!-- 表示されているURL -->
34
+
35
+ <div class="linka">https://A.com/xxx/</div>
36
+
37
+
38
+
39
+ <!-- リンク -->
40
+
41
+ <a href="#" id="link">リンク</a>
42
+
43
+
44
+
45
+ <!-- jQueryによる処理 -->
46
+
33
47
  <script>
34
48
 
35
- // URL取得するためのJS
49
+ $(function() {
36
50
 
37
- function btn1_click(){
38
51
 
39
- var arr1 = [];
40
52
 
41
- // クラスを指定
53
+ // テキストフォームを監視して入力があるたびに実行
42
54
 
43
- var list1 = document.getElementsByClassName('nya');
55
+ $('.linka').on('input change', function() {
44
56
 
45
- // ループ文で配列に格納
46
57
 
47
- for (var i=0;i<list1.length;i++){
48
58
 
49
- arr1.push(list1.item(i).innerHTML);
59
+ // テキストを取得
50
60
 
51
- }
61
+ var param = $(this).val();
52
62
 
53
- // 値を表示
54
63
 
55
- document.getElementById("r1").innerHTML = arr1;
56
64
 
65
+ // リンクを書き換え
66
+
67
+ $('#link').attr('href', 'https://B.com?param=' + param);
68
+
69
+
70
+
57
- }
71
+ });
72
+
73
+
74
+
75
+ });
58
76
 
59
77
  </script>
60
78
 
61
79
 
62
80
 
63
- <script>
64
-
65
- // ふんわり表示するためのJS
66
-
67
- (function($){
68
-
69
- $('.btn_hyoji').on("click",function(){
70
-
71
- $('.btn_link').delay(500).fadeIn(500);
72
-
73
- });
74
-
75
- })(jQuery);
76
-
77
- </script>
78
-
79
-
80
-
81
- <!-- ページに表示されているURL -->
82
-
83
- <div class="nya">https://A.com/xxx</div>
84
-
85
-
86
-
87
- <!-- 下のボタンを表示するボタン -->
88
-
89
- <div class="btn_hyoji">
90
-
91
- <input type="button" value="ボタン表示" onclick='btn1_click()'>
92
-
93
- </div>
94
-
95
-
96
-
97
- <!-- このボタンをリンクにしたい -->
98
-
99
- <div class="btn_link">
100
-
101
- https://B.com&url=<span id="r1"></span>
102
-
103
- </div>
104
-
105
81
  ```
106
82
 
107
83
 
108
84
 
109
- 上のリンクにあるjsfiddleをご覧のように、合体したURLがテキストになっています。
110
-
111
-
112
-
113
- でも、これ、どうやってリンク先に変えればいいのでしょうか？？
114
-
115
- 激しく躓いている次第です。
116
-
117
-
118
-
119
- <span id="r1"></span>
120
-
121
- という部分で表示中のURLを挿入しています。が、
122
-
123
- しかしこれでは「別のURLと併せてリンクにすること」ができなくなってしまいますよね？
124
-
125
-
126
-
127
- だって、
128
-
129
-
130
-
131
- <a href="別のURL<span id="r1"></span>">リンク先へいくボタン</a>
85
+ 「リンク」を押して「https://B.com?param=https://A.com/xxx」にアクセスさせたいのですが、修正か所をご教示いただけませんでしょうか？
132
-
133
-
134
-
135
- なんていうことはできませんよね？
136
-
137
-
138
-
139
- どうしたらいいのか、ご意見いただけませんでしょうか？
140
-
141
-
142
86
 
143
87
  宜しくお願いいたします。

3

誤字修正

2018/01/02 07:42

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,24 @@
1
1
  ###■やりたいこと
2
2
 
3
- 表示中のURLの前に、別のURLを挿入して、完成させたいです。
3
+ 表示中のURLの前に、別のURLを挿入して、合体させたいです。
4
4
 
5
5
 
6
6
 
7
- ・表示中のURL「https://A.com/xxx」
7
+ ・表示中のURL
8
8
 
9
- ・別のURL「https://B.com&url=」
9
+ 「https://A.com/xxx」
10
10
 
11
+
12
+
13
+ ・別のURL
14
+
15
+ 「https://B.com&url=」
16
+
17
+
18
+
19
+ ・合体したURL
20
+
11
- ・完成させたいURL「https://B.com&url=https://A.com/xxx」
21
+ 「https://B.com&url=https://A.com/xxx」
12
22
 
13
23
 
14
24
 
@@ -16,7 +26,7 @@
16
26
 
17
27
  javascriptで、上の完成させたいURLを**テキストで表示**というのはできました。
18
28
 
19
- [https://jsfiddle.net/ddvLf0yp/](https://jsfiddle.net/ddvLf0yp/)
29
+ [https://jsfiddle.net/ddvLf0yp/1/](https://jsfiddle.net/ddvLf0yp/1/)
20
30
 
21
31
  ```php
22
32
 
@@ -50,6 +60,24 @@
50
60
 
51
61
 
52
62
 
63
+ <script>
64
+
65
+ // ふんわり表示するためのJS
66
+
67
+ (function($){
68
+
69
+ $('.btn_hyoji').on("click",function(){
70
+
71
+ $('.btn_link').delay(500).fadeIn(500);
72
+
73
+ });
74
+
75
+ })(jQuery);
76
+
77
+ </script>
78
+
79
+
80
+
53
81
  <!-- ページに表示されているURL -->
54
82
 
55
83
  <div class="nya">https://A.com/xxx</div>
@@ -78,7 +106,7 @@
78
106
 
79
107
 
80
108
 
81
- ご覧のようにテキストになっています。
109
+ 上のリンクにあるjsfiddleをご覧のように、合体したURLがテキストになっています。
82
110
 
83
111
 
84
112
 

2

誤字修正

2018/01/02 06:59

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ###やりたいこと
1
+ ###■やりたいこと
2
2
 
3
3
  表示中のURLの前に、別のURLを挿入して、完成させたいです。
4
4
 

1

誤字修正

2018/01/02 06:55

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -4,11 +4,11 @@
4
4
 
5
5
 
6
6
 
7
- ・表示中のURL「https://example.com/xxx」
7
+ ・表示中のURL「https://A.com/xxx」
8
8
 
9
- ・別のURL「https://example.net&url=」
9
+ ・別のURL「https://B.com&url=」
10
10
 
11
- ・完成させたいURL「https://example.net&url=https://example.com/xxx」
11
+ ・完成させたいURL「https://B.com&url=https://A.com/xxx」
12
12
 
13
13
 
14
14
 
@@ -16,11 +16,13 @@
16
16
 
17
17
  javascriptで、上の完成させたいURLを**テキストで表示**というのはできました。
18
18
 
19
- [https://jsfiddle.net/enaouex7/1/](https://jsfiddle.net/enaouex7/1/)
19
+ [https://jsfiddle.net/ddvLf0yp/](https://jsfiddle.net/ddvLf0yp/)
20
20
 
21
21
  ```php
22
22
 
23
23
  <script>
24
+
25
+ // URL取得するためのJS
24
26
 
25
27
  function btn1_click(){
26
28
 
@@ -50,7 +52,7 @@
50
52
 
51
53
  <!-- ページに表示されているURL -->
52
54
 
53
- <div class="nya">https://example.com/xxx</div>
55
+ <div class="nya">https://A.com/xxx</div>
54
56
 
55
57
 
56
58
 
@@ -68,13 +70,9 @@
68
70
 
69
71
  <div class="btn_link">
70
72
 
71
- https://example.net&url=<span id="r1"></span>
73
+ https://B.com&url=<span id="r1"></span>
72
74
 
73
75
  </div>
74
-
75
-
76
-
77
-
78
76
 
79
77
  ```
80
78