跨度不包装在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 );
}