特定のクラスを持つAタグを処理から除外したい

Question

classList.containsを使えば可能らしいのですが、上手く行きません。

よろしくお願いします。

function removeWatchParam(){
  var linkelems = document.getElementsByTagName('a');
  if(linkelems){
var regexp = new RegExp(".*video/[a-z]{2,2}[0-9]+");
    for (var i = 0; i < linkelems.length; i++) {
      var regmatcher = linkelems[i].href.match(regexp);
      if(regmatcher && regmatcher.length > 0){
        linkelems[i].href = regmatcher[0];
      }
    }
  }
}

var timer = 0;
  timer = setTimeout(function() {
    removeWatchParam();
  }, 30);
```

Comments

[m.ts10806]

何がどううまくいっていませんか？「classList.containsを使えば可能」というのを調べてきたのであればその情報参照先もご提示願います。

[m.ts10806]

そもそもcontains()使われたコードは組まれていないようなので　https://developer.mozilla.org/ja/docs/Web/API/Element/classList　など見ながら組んでみては？その上で何がどううまくいかないのかを質問されると良いかと思います。

Answer 1

classList.contains(className)を使って特定のクラスを持つかどうかを判定するのも良いですが, querySelectorAllメソッドと:not擬似クラスを組み合わせることで”特定のクラスを持たないノード”のリストを一発で釣れます.

var linkelems = document.querySelectorAll('a:not(.ignore)');

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/ja/docs/Web/CSS/:not

Answer 2

for文の中でaタグを除去するのであれば、document.querySelectorAll()をdocument.getElementsByTagName()の代わりに使って下さい。前者は静的なNodelistを返し、後者は常に現在のdomの状態を反映したHTMLCollectionを返す為、for文の中でdocument.getElementsByTagName()が返すリスト内の要素を除去すると、リストの長さも変わってしまい、for文中の処理に影響してしまいます。

Comments

[defghi1977]

ああなるほど, NodeListとHTMLCollectrionの違いはそこにあるのか
NodeList・・・生死不明
HTMLCollection・・・生存確定
と

[HayatoKamono]

これはハマりますよね。

Answer 3

以下で、特定のクラスを持つAタグが除外された配列を取得できます。
この配列に対して処理をすればいいのではないでしょうか。

var elems = Array.from(document.querySelectorAll("a")).filter(elem => !elem.classList.contains("特定のクラス"));

Answer 4

ちょっと具体的な情報がたりないですね
こんな感じを想定されているのでしょうか？

window.addEventListener('DOMContentLoaded', function(e){
  var reg=new RegExp('.*?(hoge[0-9]+).*');
  Array.prototype.forEach.call(document.querySelectorAll('[href]'),function(x){
    x.setAttribute("href",x.getAttribute("href").replace(reg,function(v0,v1){return v1;}));
  });
});

<a href="hoge1">x1</a><br>
<a href="xxxhoge123xxx">x2</a><br>
<a href="xxxhoge123456xxx">x3</a><br>
<a href="xxxhogexxx123xxx">x4</a><br>