特定の要素で、特定の属性値(部分一致)である場合にのみ変更したい

javascript
1コード
2<div class="pagination"><ul class="pagination"><li class="prev previous_page disabled"><a href="#">&#8592; Previous</a></li> <li class="active"><a href="/microposts?page=1">1</a></li> <li><a rel="next" href="/microposts?page=2">2</a></li> <li><a href="/microposts?page=3">3</a></li> <li><a href="/microposts?page=4">4</a></li> <li><a href="/microposts?page=5">5</a></li> <li><a href="/microposts?page=6">6</a></li> <li class="next next_page "><a rel="next" href="/microposts?page=2">Next &#8594;</a></li></ul></div>
3

上記のコードから、a要素のhref属性の属性値の/micropostsの部分だけを削除する方法が思いつかなくて困っています。
getElementsByClassName()で、class="pagination"のul要素を取得して、Element.childrenで子要素のliを取得する方法まで考えましたが、そこから先の処理が思いつきません。

kei344

2018/10/22 13:37

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

m.g2017

2018/10/23 12:07

ご指摘ありがとうございます。「解決済」にしました。

行動規範の内容に同意します

回答2件

こんにちは。

ご質問にある、

getElementsByClassName()で、class="pagination"のul要素を取得して、Element.childrenで子要素のliを取得する方法

というアプローチも悪くはないと思いますが、別の考え方として

/micropostsで始まるhrefを持つ<a>を集めてきて、それらの hrefから /micropostsを削除する。

という方法もあるかと思います。以下その実装例になります。

javascript
1document
2    .querySelectorAll('a[href^="/microposts"]')
3    .forEach(a => {
4        a.href = a.href.replace('/microposts','');
5    });