GetElementsByClassNameで取得したsrcの値をテキストで取得したい

現在システムが吐き出している画像をもとに、だし分けテストを実施したいのですが、
だし分けのキーとなるものが、画像のファイル名だけになります。
その画像をかこっているDivタグのclass名は画面内でその箇所ユニークなので、
GetElementsByClassName.src で画像ファイル名は取得できたのですが、
テキストして、取得したいです。
どうすればよいでしょうか。

<div class="aaa"><a href="https://www.yahoo.co.jp" target="_blank"><img src="hogehoge_001.jpg"></a></div> ------------------------------------------- ↓ 画像内の　’001'のみを最終的に取得したい。

下記コードでは、画像ファイルとしてしか取得できず、テキスト変換できませんでした。

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

回答3件

かなり強引なやり方ですが・・・

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>001の箇所を取得</title>
7  </head>
8  <body>
9    <div class="aaa">
10        <a href="https://www.yahoo.co.jp" target="_blank">
11        <img src="hogehoge_001.jpg">
12        </a>
13    </div>
14    <script>
15        var text = document.getElementsByClassName("aaa")[0].getElementsByTagName("a")[0].innerHTML;
16        var hit = text.indexOf("hogehoge_");
17        text = text.slice(hit + 9);
18        text.replace(/\s+|.jpg|\">/g, "");
19    </script>
20  </body>
21</html>

投稿2019/11/18 12:18

編集2019/11/18 12:24

hiroo_mokumoku

総合スコア128

tontail

2019/11/18 23:50

やはり強引な方法しかないんですね。ありがとうございます！ちょっとこれで調べてみます！

hiroo_mokumoku

2019/11/19 04:51 編集

この書き方は汎用性の効かない書き方なので使用する際は注意が必要です。あくまでも参考程度に留めておいてください。

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

getElementsByClassName は HTMLCollection を返すので、取得方法が違います。

【getElementsByClassNameとgetElementByIdの返り値の違い - Qiita】
https://qiita.com/rindarinda5/items/c26dc81fe8cd98992dc1

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

投稿2019/11/18 11:24

kei344

総合スコア69407

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  var src=document.querySelector('.aaa img').getAttribute('src');
4  console.log(src.match(/hogehoge_(.+?).jpg/)[1]);
5});
6</script>
7<div class="aaa">
8<a href="https://www.yahoo.co.jp" target="_blank">
9<img src="hogehoge_001.jpg">
10</a>
11</div>