无法读取未定义的属性“替换” - 替换 JS 生成的 HTML 中的文本答案

【问题标题】：Cannot read property 'replace' of undefined - replacing text in JS generated HTML无法读取未定义的属性“替换” - 替换 JS 生成的 HTML 中的文本
【发布时间】：2015-03-16 19:26:58
【问题描述】：

我有一个由外部 javascript 生成的无序列表 (ul)。在每个列表项中都有一个我想删除的重复行。因为我无法修改外部 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 生成的吗？我走到了死胡同。

【问题讨论】：

标签： javascript html list str-replace

【解决方案1】：

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', ''); 
}

正如您在 cmets 中所建议的，您可能希望对找到的所有元素执行替换。在这种情况下，您可以像这样遍历元素：

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

【讨论】：