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

編集履歴

質問編集履歴

7

誤字の修正

2018/01/02 08:49

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- javascriptでURLを合体させる方法
1
+ javascriptでURLを連結させる方法
body CHANGED
@@ -1,5 +1,5 @@
1
1
  ###■やりたいこと
2
- 表示中のURLの前に、別のURLを挿入して、合体させたいです。
2
+ 表示中のURLの前に、別のURLを挿入して、連結させたいです。
3
3
 
4
4
  ・表示中のURL
5
5
  「https://A.com/xxx」
@@ -7,11 +7,11 @@
7
7
  ・別のURL
8
8
  「https://B.com?param=」
9
9
 
10
- ・合体させたURL
10
+ ・連結させたURL
11
11
  「https://B.com?param=https://A.com/xxx」
12
12
 
13
13
  ###■現状のコード
14
- javascriptで次のように書いても、なぜか合体できません。
14
+ javascriptで次のように書いても、なぜか連結できません。
15
15
  [https://jsfiddle.net/he8sgh29/](https://jsfiddle.net/he8sgh29/)
16
16
  ```php
17
17
  <head>

6

誤字の修正

2018/01/02 08:49

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -12,22 +12,27 @@
12
12
 
13
13
  ###■現状のコード
14
14
  javascriptで次のように書いても、なぜか合体できません。
15
- [https://jsfiddle.net/7uxond8c/2/](https://jsfiddle.net/7uxond8c/2/)
15
+ [https://jsfiddle.net/he8sgh29/](https://jsfiddle.net/he8sgh29/)
16
16
  ```php
17
+ <head>
17
- <!-- 表示されているURL -->
18
+ <!-- jQueryの読み込み -->
18
- <div class="linka">https://A.com/xxx/</div>
19
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
20
+ </head>
19
21
 
22
+ <!-- 表示されてるURL -->
23
+ <div class="urltext">https://A.com/xxx/</div>
24
+
20
25
  <!-- リンク -->
21
26
  <a href="#" id="link">リンク</a>
22
27
 
23
- <!-- jQueryによる処理 -->
28
+ <!-- jQuery -->
24
29
  <script>
25
30
  $(function() {
26
31
 
27
- // テキストフォームを監視して入力があるたびに実行
32
+ // 表示されてるURLのクラスを指示して
28
- $('.linka').on('input change', function() {
33
+ $('.urltext').on("load",function(){
29
34
 
30
- // テキストを取得
35
+ // URLを取得して
31
36
  var param = $(this).val();
32
37
 
33
38
  // リンクを書き換え
@@ -37,7 +42,6 @@
37
42
 
38
43
  });
39
44
  </script>
40
-
41
45
  ```
42
46
 
43
47
  「リンク」を押して「https://B.com?param=https://A.com/xxx」にアクセスさせたいのですが、修正か所をご教示いただけませんでしょうか？

5

リンク先修正

2018/01/02 08:14

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ###■現状のコード
14
14
  javascriptで次のように書いても、なぜか合体できません。
15
- [https://jsfiddle.net/7uxond8c/1/](https://jsfiddle.net/7uxond8c/1/)
15
+ [https://jsfiddle.net/7uxond8c/2/](https://jsfiddle.net/7uxond8c/2/)
16
16
  ```php
17
17
  <!-- 表示されているURL -->
18
18
  <div class="linka">https://A.com/xxx/</div>

4

質問の適正化

2018/01/02 07:46

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- 表示中のURLの前に、ｊｓを使って別のURLを挿入したい。
1
+ javascriptでURLを合体させる方法
body CHANGED
@@ -5,68 +5,40 @@
5
5
  「https://A.com/xxx」
6
6
 
7
7
  ・別のURL
8
- 「https://B.com&url=」
8
+ 「https://B.com?param=」
9
9
 
10
- ・合体したURL
10
+ ・合体させたURL
11
- 「https://B.com&url=https://A.com/xxx」
11
+ 「https://B.com?param=https://A.com/xxx」
12
12
 
13
- ###■現状
13
+ ###■現状のコード
14
- javascriptで、上の完成させたいURLを**テキストで表示**というのはできました。
14
+ javascriptで次のように書いても、なぜか合体できません。
15
- [https://jsfiddle.net/ddvLf0yp/1/](https://jsfiddle.net/ddvLf0yp/1/)
15
+ [https://jsfiddle.net/7uxond8c/1/](https://jsfiddle.net/7uxond8c/1/)
16
16
  ```php
17
- <script>
18
- // URL取得するためのJS
19
- function btn1_click(){
20
- var arr1 = [];
21
- // クラスを指定
22
- var list1 = document.getElementsByClassName('nya');
23
- // ループ文で配列に格納
24
- for (var i=0;i<list1.length;i++){
25
- arr1.push(list1.item(i).innerHTML);
26
- }
27
- // 値を表示
28
- document.getElementById("r1").innerHTML = arr1;
29
- }
30
- </script>
17
+ <!-- 表示されているURL -->
18
+ <div class="linka">https://A.com/xxx/</div>
31
19
 
20
+ <!-- リンク -->
21
+ <a href="#" id="link">リンク</a>
22
+
23
+ <!-- jQueryによる処理 -->
32
24
  <script>
33
- // ふんわり表示するためのJS
34
- (function($){
25
+ $(function() {
35
- $('.btn_hyoji').on("click",function(){
36
- $('.btn_link').delay(500).fadeIn(500);
37
- });
38
- })(jQuery);
39
- </script>
40
26
 
41
- <!-- ページに表示されているURL -->
27
+ // テキストフォームを監視して入力があるたびに実行
42
- <div class="nya">https://A.com/xxx</div>
28
+ $('.linka').on('input change', function() {
43
29
 
44
- <!-- 下のボタンを表示するボタン -->
45
- <div class="btn_hyoji">
46
- <input type="button" value="ボタン表示" onclick='btn1_click()'>
47
- </div>
30
+ // テキストを取得
31
+ var param = $(this).val();
48
32
 
49
- <!-- このボタンをリンクにしたい -->
50
- <div class="btn_link">
51
- https://B.com&url=<span id="r1"></span>
52
- </div>
33
+ // リンクを書き換え
53
- ```
34
+ $('#link').attr('href', 'https://B.com?param=' + param);
54
35
 
55
- 上のリンクにあるjsfiddleをご覧のように、合体したURLがテキストになっています。
36
+ });
56
37
 
38
+ });
57
- でも、これ、どうやってリンク先に変えればいいのでしょうか？？
39
+ </script>
58
- 激しく躓いている次第です。
59
40
 
60
- <span id="r1"></span>
61
- という部分で表示中のURLを挿入しています。が、
41
+ ```
62
- しかしこれでは「別のURLと併せてリンクにすること」ができなくなってしまいますよね？
63
42
 
64
- だって、
65
-
66
- <a href="別のURL<span id="r1"></span>">リンク先へいくボタン</a>
43
+ 「リンク」を押して「https://B.com?param=https://A.com/xxx」にアクセスさせたいのですが、修正か所をご教示いただけませんでしょうか？
67
-
68
- なんていうことはできませんよね？
69
-
70
- どうしたらいいのか、ご意見いただけませんでしょうか？
71
-
72
44
  宜しくお願いいたします。

3

誤字修正

2018/01/02 07:42

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,13 +1,18 @@
1
1
  ###■やりたいこと
2
- 表示中のURLの前に、別のURLを挿入して、完成させたいです。
2
+ 表示中のURLの前に、別のURLを挿入して、合体させたいです。
3
3
 
4
+ ・表示中のURL
4
- ・表示中のURL「https://A.com/xxx」
5
+ 「https://A.com/xxx」
5
- ・別のURL「https://B.com&url=」
6
- ・完成させたいURL「https://B.com&url=https://A.com/xxx」
7
6
 
7
+ ・別のURL
8
+ 「https://B.com&url=」
9
+
10
+ ・合体したURL
11
+ 「https://B.com&url=https://A.com/xxx」
12
+
8
13
  ###■現状
9
14
  javascriptで、上の完成させたいURLを**テキストで表示**というのはできました。
10
- [https://jsfiddle.net/ddvLf0yp/](https://jsfiddle.net/ddvLf0yp/)
15
+ [https://jsfiddle.net/ddvLf0yp/1/](https://jsfiddle.net/ddvLf0yp/1/)
11
16
  ```php
12
17
  <script>
13
18
  // URL取得するためのJS
@@ -24,6 +29,15 @@
24
29
  }
25
30
  </script>
26
31
 
32
+ <script>
33
+ // ふんわり表示するためのJS
34
+ (function($){
35
+ $('.btn_hyoji').on("click",function(){
36
+ $('.btn_link').delay(500).fadeIn(500);
37
+ });
38
+ })(jQuery);
39
+ </script>
40
+
27
41
  <!-- ページに表示されているURL -->
28
42
  <div class="nya">https://A.com/xxx</div>
29
43
 
@@ -38,7 +52,7 @@
38
52
  </div>
39
53
  ```
40
54
 
41
- ご覧のようにテキストになっています。
55
+ 上のリンクにあるjsfiddleをご覧のように、合体したURLがテキストになっています。
42
56
 
43
57
  でも、これ、どうやってリンク先に変えればいいのでしょうか？？
44
58
  激しく躓いている次第です。

2

誤字修正

2018/01/02 06:59

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,4 @@
1
- ###やりたいこと
1
+ ###■やりたいこと
2
2
  表示中のURLの前に、別のURLを挿入して、完成させたいです。
3
3
 
4
4
  ・表示中のURL「https://A.com/xxx」

1

誤字修正

2018/01/02 06:55

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,15 +1,16 @@
1
1
  ###やりたいこと
2
2
  表示中のURLの前に、別のURLを挿入して、完成させたいです。
3
3
 
4
- ・表示中のURL「https://example.com/xxx」
4
+ ・表示中のURL「https://A.com/xxx」
5
- ・別のURL「https://example.net&url=」
5
+ ・別のURL「https://B.com&url=」
6
- ・完成させたいURL「https://example.net&url=https://example.com/xxx」
6
+ ・完成させたいURL「https://B.com&url=https://A.com/xxx」
7
7
 
8
8
  ###■現状
9
9
  javascriptで、上の完成させたいURLを**テキストで表示**というのはできました。
10
- [https://jsfiddle.net/enaouex7/1/](https://jsfiddle.net/enaouex7/1/)
10
+ [https://jsfiddle.net/ddvLf0yp/](https://jsfiddle.net/ddvLf0yp/)
11
11
  ```php
12
12
  <script>
13
+ // URL取得するためのJS
13
14
  function btn1_click(){
14
15
  var arr1 = [];
15
16
  // クラスを指定
@@ -24,7 +25,7 @@
24
25
  </script>
25
26
 
26
27
  <!-- ページに表示されているURL -->
27
- <div class="nya">https://example.com/xxx</div>
28
+ <div class="nya">https://A.com/xxx</div>
28
29
 
29
30
  <!-- 下のボタンを表示するボタン -->
30
31
  <div class="btn_hyoji">
@@ -33,10 +34,8 @@
33
34
 
34
35
  <!-- このボタンをリンクにしたい -->
35
36
  <div class="btn_link">
36
- https://example.net&url=<span id="r1"></span>
37
+ https://B.com&url=<span id="r1"></span>
37
38
  </div>
38
-
39
-
40
39
  ```
41
40
 
42
41
  ご覧のようにテキストになっています。