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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29085341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:49:52  来源:igfitidea点击:

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

javascripthtmlliststr-replace

提问by Jimmi

I have an unordered list (ul) that is generated by external javascript. In each list item there is a repeated line that I'd like to delete. Because I cannot modify the external javascript, I am attempting to use the replace method. The list is identified by a class given to each lielement; rss-item.

我有一个ul由外部 javascript 生成的无序列表 ( )。在每个列表项中,我想删除一个重复的行。因为我无法修改外部 javascript,所以我尝试使用替换方法。该列表由赋予每个li元素的类标识;rss-item.

The following is my code:

以下是我的代码:

   <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>

The error is occuring on the following line:

错误发生在以下行:

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

The error states:

错误指出:

Uncaught TypeError: Cannot read property 'replace' of undefined

From what I understand, this probably means that the javascript is either not finding the element with class name 'rss-item', or not finding the text I am trying to replace. I am absolutely certain this is the correct class name, and that the text I am trying to replace is indeed there. Is this problem occuring because the markup is being generated by javascript? I've come to a dead end.

据我了解,这可能意味着 javascript 要么找不到类名“rss-item”的元素,要么找不到我要替换的文本。我绝对确定这是正确的类名,并且我试图替换的文本确实存在。出现这个问题是因为标记是由 javascript 生成的吗?我走到了死胡同。

回答by Tom Fenech

document.getElementsByClassName('rss-item')returns an array-like object (a HTMLCollection). If you want the first element, you should ask for it:

document.getElementsByClassName('rss-item')返回一个类似数组的对象(一个HTMLCollection)。如果你想要第一个元素,你应该要求它:

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

If you wanted to be a bit more defensive, it may be worth actually checking that any elements have been found, using something like this:

如果您想更加防御,实际上可能值得检查是否已找到任何元素,使用以下内容:

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

As you have suggested in the comments, you may wish to perform the replacement on all of the elements that are found. In this case, you can loop through the elements like this:

正如您在评论中所建议的,您可能希望对找到的所有元素执行替换。在这种情况下,您可以像这样循环遍历元素:

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