[解決済み] 未定義のプロパティ 'replace' が読み込めない - JS で生成された HTML のテキストを置換する。

質問

順不同のリストがあります ( ul ) は、外部 javascript によって生成されます。各リスト項目には、削除したい行が繰り返されています。外部javascriptを変更することができないので、replaceメソッドを使用しようとしています。リストは、それぞれの li 要素を使用します。 rss-item .

以下は、私のコードです。

   <script>
        function myFunction() {
            var str = document.getElementsByClassName('rss-item').innerHTML; 
            var res = str.replace('Text to replace', '');
            document.getElementsByClassName('rss-item').innerHTML = res; 
        }
    </script>

    <button onclick="myFunction()">Replace</button>

次の行でエラーが発生しています。

var res = str.replace('Text to replace', '');

エラーの状態です。

Uncaught TypeError: Cannot read property 'replace' of undefined

私が理解したところでは、これはおそらく、javascriptがクラス名「rss-item」の要素を見つけられないか、私が置き換えようとしているテキストが見つからないかのどちらかです。このクラス名が正しいこと、そして置き換えようとしているテキストが本当にそこにあることは、絶対に間違いありません。この問題は、マークアップがjavascriptによって生成されているために発生するのでしょうか？私は行き詰まりました。

どうすればいいですか？

document.getElementsByClassName('rss-item') は配列のようなオブジェクトを返します。 HTMLCollection ). もし、最初の要素が欲しいなら、それを要求すべきです。

var str = document.getElementsByClassName('rss-item')[0].innerHTML;

もう少し防御的でありたいなら、以下のような方法で、実際に要素が見つかったかどうかを確認する価値があるかもしれません。

var elements = document.getElementsByClassName('rss-item');
if (elements.length > 0) {
    elements[0].innerHTML = elements[0].innerHTML.replace('Text to replace', ''); 
}

コメントでご指摘いただいたように、見つかったすべての要素に対して置換を行いたい場合があります。この場合、次のように要素をループさせることができます。

var elements = document.getElementsByClassName('rss-item');
for (var i = 0; i < elements.length; ++i) {
    elements[i].innerHTML = elements[i].innerHTML.replace('Text to replace', '');
}