jquery - 跨度不包裹在 div 内

Question

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

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

我模拟了它，它在 Chrome 中运行良好。但在 IE 中，span 似乎不会跳转到 div 的下一行，因为该行中的单词太大而无法容纳。相反，它似乎会强制产生一种断词效果——textarea 不会这样做，因此单词不再对齐。在 IE8 + 9 中测试。

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

这是一个 fiddle .尝试在文本区域的开头添加一个字母，您就会明白我的意思。

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 );
}