jquery - 跨度不包裹在 div 内

Question

我试图通过div在我的字段后面放置一个并复制这些值来突出显示文本区域的单词。

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

我模拟了它，它在 Chrome 中运行良好。但是在 IE 中，当单词太大而无法容纳该行时，似乎spans 不会跳到 s 的下一行。div取而代之的是，它似乎会强制产生断词的效果-这textarea不会，因此单词不再对齐。在 IE8 + 9 中测试。

屏幕截图，IE 9 中的代码结果

这是一个小提琴。尝试在 textarea 的开头添加一个字母，你会明白我的意思。

Answer 1

现场演示

$("#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 );
}