跨度未包装在div内

Question

I'm trying to highlight textarea words by putting a div behind my field and copying over the values.

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

I mocked it up and it works fine in Chrome. But in IE it seems that span s won't jump to the next line of the div , when the word is too big to fit on that row. Instead it seems to force a break-word sort of effect - which the textarea doesn't do, so the words don't align anymore. Tested in IE8 + 9.

Screenshot, code result in IE 9

Here's a fiddle . try adding a letter at the start of the textarea and you'll see what I mean.

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