jquery - スパンがdiv内でラップされていない

Question

divフィールドの後ろに置き、値をコピーして、テキストエリアの単語を強調表示しようとしています。

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

私はそれをモックアップしました、そしてそれはChromeでうまく働きます。しかし、IEでは、単語が大きすぎてその行に収まらない場合、spansはの次の行にジャンプしないようです。div代わりに、それはブレークワードのような効果を強制するように見えます-それはtextareaしません、それで単語はもう整列しません。IE8+9でテスト済み。

スクリーンショット、IE9のコード結果

これがフィドルです。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 );
}