Question

我确信这是我犯的一个非常基本的错误，但我无法解决我出错的地方。

In this basic fiddle example，你会看到我有5个div。我试图用另一个单词替换每个div中间的一个单词，但它似乎是将第一个div的内容复制到所有其他单词中，正如你可以从开头的帖子中看到的那样。

我用来执行此操作的代码片段是

$('.post').each(function(){
    $('em').html( 
        $('em').html().replace('in','hello')
    );
});

有人可以帮我看看我哪里出错吗？

Answer 1

您正在使用所有 em s'文字的内容替换每个em文字。 html还接受一个可用于引用this的函数，或将当前的html作为参数：

$('.post em').html(function (idx, html){
    return html.replace("in", "hello");
});

您的更新jsFiddle demo。

Answer 2

不需要.each - 您可以使用带有mutator函数的.text版本，并对每个匹配元素执行隐式.each。 mutator函数传递给原始文本，返回值被放回原位：

replaceIn = function() {
    $('.post em').text(function(ix, txt) {
        return txt.replace(/\b(in)\b/g, 'hello');
    });
}

请参阅http://jsfiddle.net/alnitak/ZUQ4W/

我使用.text代替.html，因为匹配元素中没有HTML。

请注意使用带有/g标记的正则表达式，以确保替换所有次出现的“in”和\b标记，以确保它仅匹配整个词语的

replace的字符串版本只能替换字符串中的第一个匹配项。如果那是你的意图，请随意使用它吗？

另请注意，如果您对具有后代的元素使用此（或使用.html的变体），则必须非常小心，因为外部元素在内部元素之前处理，而外部元素上的操作可能会对其进行意外更改子孙后代。明智地选择你的选择器，以便只改变叶子节点！

避免.html()的另一个好理由是，如果序列化一个元素，然后使用.html()再次反序列化，那么在该元素上设置的任何属性或事件都将丢失。尽可能使用HTML字符串操作完成对DOM的更改>

为了安全起见，请使用：

replaceIn = function () { $('.post em').contents().filter(function () { return this.nodeType === 3; }).each(function() { // NB: DOM level 3 uses .textContent in preference to .nodeValue this.nodeValue = this.nodeValue.replace(/\b(in)\b/g, 'hello'); }); }

绝对可以确保任何嵌套元素（例如index标记！）都无法修改。

请参阅http://jsfiddle.net/alnitak/rZU5d/

替换文字。

2 个答案: