无法读取未定义的属性 'replace' - 替换生成的 JS 中的文本 HTML

Question

我有一个由外部 javascript 生成的无序列表 (ul)。在每个列表项中，我想删除一个重复的行。因为我无法修改外部 javascript，所以我尝试使用替换方法。该列表由每个 li 元素的 class 标识； 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 要么找不到名称为 class 'rss-item' 的元素，要么找不到我要替换的文本。我绝对确定这是正确的 class 名称，并且我要替换的文本确实存在。出现此问题是因为标记是由 javascript 生成的吗？我走到了死胡同。

Answer 1

document.getElementsByClassName('rss-item') returns 类数组对象（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', '');
}

无法读取未定义的属性 'replace' - 替换生成的 JS 中的文本 HTML

Cannot read property 'replace' of undefined - replacing text in JS generated HTML

javascript

html

list

str-replace

无法读取未定义的 属性 'replace' - 替换生成的 JS 中的文本 HTML

Cannot read property 'replace' of undefined - replacing text in JS generated HTML

javascript

html

list

str-replace

无法读取未定义的属性 'replace' - 替换生成的 JS 中的文本 HTML