替換文字。

Question

我敢肯定，這是我犯的一個非常基本的錯誤，但我無法弄清楚我出錯的地方。

In this basic fiddle example，你會看到我有5個div。我試圖用另一個單詞替換每個div中間的單詞，但它似乎是將第一個div的內容複製到所有其他單詞的內容中，如從開始發佈的數字中可以看到的那樣。

的代碼片段我使用要做到這一點

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

請有人可以幫我看看我要去哪裏錯了嗎？

Answer 1

不需要.each - 您可以使用.text版本，該版本採用增變函數並在每個匹配元素上執行隱式的.each。增變函數傳遞原文，並且返回值被放回原來的位置：

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標誌使用正則表達式，以確保所有出現的「在」替換和\b標記，以確保它僅匹配整個單詞。

字符串版本replace只能替換字符串中的第一個匹配項。當然，如果這是您的意圖，請隨時使用它！

另請注意，如果您在具有後代的元素上使用此元素（或使用.html的變體），則必須非常小心，因爲外部元素在內部元素之前得到處理，外部元素上的操作可能會對後代進行意外更改。明智地選擇你的選擇器，以便只改變葉節點！

另一個很好的理由，以避免.html()是，如果你連載的元素，然後用.html()然後再次deserialise它已經被設置元素上的任何屬性或事件都將丟失。儘可能使用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/

Answer 2

您正在替換每個em文本的內容全部em s的文本。 html也接受，您可以使用引用this，或採取當前的HTML作爲參數的函數：

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

你更新jsFiddle demo。