範圍不包裹在div

Question

我試圖通過將div放在我的字段後面並複製值來突出顯示textarea字樣。

$("div").html($("textarea").text() 
    .replace("bad-word", "<span style='background-color: red'>bad-word</span>")) 

我嘲笑它，它在Chrome中正常工作。但在IE中，似乎span s不會跳到div的下一行，此時單詞太大而不適合該行。相反，它似乎強制了一種破壞性的效果 - textarea不這樣做，所以這些詞不再對齊。在IE8測試+ 9.

截圖，代碼結果IE 9

這裏的一個fiddle。嘗試在textarea的開頭添加一個字母，你會明白我的意思。

Answer 1

LIVE DEMO

$("#g1").val("This is me talking about pizza, cheese and also other pizza too hello! how are you?"); 

$("#g1").keyup(function(e) { 
    keyUp(this); 
}) 

function keyUp(el) { 
    var txtArea = $(el); 
    var txtAVal = txtArea .val(); 
    txtAVal = txtAVal.replace(/pizza/gi, "<span style='background:red'>pizza</span>"); 
    $("#g2").html(txtAVal); 
}