複数のリンクを配列で取得しそれぞれの場合に応じてに任意の値を追記したい

Question

<p><a href="http://test.jp/index.html">リンク1</a></p>

<p><a href="http://test.jp/index.html?param=test">リンク2</a></p>

<p><a href="#a">リンク３</a></p>

上記のリンクがHTMLにありましてそちらに、
それぞれ任意の値を入れたいです。
※HTMLはいじれないものとします。

var url = document.querySelectorAll('a');
url.forEach(function (value, index, url) {
if ( url.match(/(http|https)://.+/) !== -1) {
$('a').attr('href',function(){return $(this).attr('href') + "任意の値1"});
}if ( url.indexOf('?') != -1) {
$('a').attr('href',function(){return $(this).attr('href')+ "任意の値2"});
}
});

リンクが絶対パスのときに”任意の値1”を入れ、リンクがパラメーター付きの絶対パスのときに”任意の値2”を入れ、アンカーリンクのときに何もしない処理をしようと思い、上記のjsを書きましたが、それぞれのリンクをうまく処理できません…

うまい方法はありますでしょうか！？

Comments

[Lhankor_Mhy]

var i = 0; i < url.length; i++;

↑これはあまり意味がないと思うのですが、これで間違いないですか？ for文の残骸のように見えます。

[yumyum]

すみません。こちらはおっしゃる通り残骸です。
削除させていただきました。。。

[Lhankor_Mhy]

そうだとすると、i には何が入っていますか？

[yumyum]

現状定義していませんが、
必要ですよね！？

[Lhankor_Mhy]

あ、質問の編集を拝読しました。

[Lhankor_Mhy]

『リンク１が絶対パスのときに”任意の値1”を入れ、
リンク２がパラメーター付きの絶対パスのときに”任意の値2”を入れ、
リンク3のアンカーリンクのときは何もしないという処理をしよう』

とのことですが、リンク３が絶対パスのときには何もしない、という理解で合っていますか？
それとも、「全てのリンクが絶対パスのときに”任意の値1”を入れ、」のように読んだ方がいいですか？

[yumyum]

日本語おかしいですね。
リンクが絶対パスのときに”任意の値1”を入れ、リンクがパラメーター付きの絶対パスのときに”任意の値2”を入れ、アンカーリンクのときに何もしない
です。。。

[x_x]

「jQuery」タグがありませんが、jQuery を使うのでしょうか？

[yumyum]

jQueryも使用します！

[Lhankor_Mhy]

リンクがパラメーター付きの絶対パスのときには、絶対パスなので”任意の値1”を入れ、さらにパラメーター付きの絶対パスなので”任意の値2”も入れる、という理解で合ってますか？
それとも、「パラメーター付きではない絶対パスのときに”任意の値1”を入れ、」と読んだ方がいいですか？

[x_x]

例示にわたしの思っている絶対パスが存在していないようなので、具体的にどれを取り出したいのかを示してもらえたらと思います。
https://teratail.com/questions/17299
https://teratail.com/questions/95783
https://lowreal.net/2006/09/02/1

[yumyum]

パラメーター付きではない絶対パスのときに”任意の値1”を入れ、」です。

[yumyum]

取り出す値は、aタグのhref
http://test.jp/index.html
http://test.jp/index.html?param=test
#a
こちらです！

[x_x]

どれというのはどのような href 属性値かということなのですが、とりあえず絶対パスを無視して回答します

[think49]

既出の指摘ですが、「絶対パス」と「アンカーリンク」の用法が誤っているので、用語定義を再確認の上、質問文を「編集」で修正する事をお勧めします。
https://teratail.com/questions/17299

[yumyum]

think49さん
＼(^o^)／サンキューでーす

Answer 1

ご質問のコードを整形しました。

var url = document.querySelectorAll('a');
url.forEach(function (value, index, url) {
  if ( url.match(/(http|https)://.+/) !== -1) {
    $('a').attr('href',function(){return $(this).attr('href') + "任意の値1"});
  }
  if ( url.indexOf('?') != -1) {
    $('a').attr('href',function(){return $(this).attr('href')+ "任意の値2"});
  }
});

まず、urlにはNodeListが入っているため、文字列のメソッドであるmatchやindexOfは使えません。url.forEach()でひとつずつ要素を取り出していますから、getAttribute()でそのhref属性を参照するようにしてみてください。

次に、$('a')はドキュメント上の全てのA要素に変更を加えてしまいます。url.forEach()でひとつずつ要素を取り出していますから、その要素ごとに任意の値を追加するなどしてみてください。

最後に、最初のif文ですが、elseがないため、条件成立不成立に関わりなく、次のif文が実行されます。適切にelseなどを使ってみてください。

ほかにも気になることは色々ありますが、つまりまあ、こんな感じかと。（動作確認してないです）

var url = document.querySelectorAll('a');
url.forEach(function (value, index, url) {
  if ( value.getAttribute("href").match(/(http|https)://.+/) === null) {
    return;
  } else if ( value.getAttribute("href").indexOf('?') != -1) {
    value.attr('href',function(){return $(this).attr('href')+ "任意の値2"});
  } else {
    value.attr('href',function(){return $(this).attr('href') + "任意の値1"});
  }
});

Comments

[yumyum]

ありがとうございます！
value.attr is not a function
と出てしまいます…

[Lhankor_Mhy]

jQueryオブジェクトに変えればいいかと思います。

[yumyum]

どうすれば良いでしょうか…！？

[Lhankor_Mhy]

$(value) です。

[yumyum]

ありがとうございます！

Answer 2

Lhankor_Mhy様のご回答とご助言を元に組ませていただき、
解決できました！
ありがとうございます！！

var url = document.querySelectorAll('a');
url.forEach(function (value, index, url) {
  if ( value.getAttribute("href").match(/(http|https)://.+/) === null) {
    return;
  } else if ( value.getAttribute("href").indexOf('?') != -1) {
    $(value).attr('href',function(){return $(this).attr('href')+ "任意の値2"});
  } else {
    $(value).attr('href',function(){return $(this).attr('href') + "任意の値1"});
  }
});

Answer 3

$('a').each(function(index, a) {
  var url = $(a).attr('href');
  if (url === $(a).prop('href')) {
    a.href += '任意の値1';
  }

  if (url.indexOf('?') >= 0) {
    a.href += '任意の値2';
  }
});

Comments

[yumyum]

ありがとうございます！この方法では出来ませんでした…

[x_x]

どの辺が違っていたのでしょうか？

[yumyum]

お答えいただきありがとうございます！