jquery - facebook 喜欢标签 - word-wrap :break-word; doesnt work on FF and IE9+

Question

我正在尝试插入 <b>每当 keyup , 一个 #被检测到(如 Facebook )。我从 textarea 读到, 并复制到 div元素。

    <div  class="new_postAdDescription2" id="new_postAdDescription2" spellcheck='false' contenteditable='true'> </div>  
    <textarea name="description" id="new_postAdDescription" spellcheck='false' 
class="new_postAdDescription" cols="30" rows="10" placeholder="Posto nj&euml; shpallje" >
</textarea>

请看我如何替换空格和新行。我试过 以及(顺便说一下，如果我删除空格匹配，一切正常!)

$('#new_postAdDescription').keyup(function (e) {
        var str = $('#new_postAdDescription').val();

        str = str.replace(/ /g, ' ');
        str = str.replace(/\n/g, '<br/> ');

        str = str.replace(/(&#160;|<br\/> )#([a-zA-Z0-9]+)/g, "$1<b class='highlighterContent'>#$2</b>");

        $('#new_postAdDescription2').html(str);  
    });

//样式

<style>
.new_postAdDescription, .new_postAdDescription2{
    position: relative;
    float: left;
    background-color: transparent;
    border: 0;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    outline: 0;
    width: 694px;
    color:#1c1c1c;
    resize: none;
    margin: 10px;
    height: 115px;
    font-size:13px;
    line-height:1.3;
    direction: ltr; 
    word-wrap:break-word;
}

.new_postAdDescription2{
position:absolute;
color:transparent;
word-wrap:break-word;
direction: ltr; 
text-align: left;
}
.highlighterContent{
position:relative;
font-weight:bold;
color:#333;
background-color:#f2f2f2;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

</style>

它不是最好的，但它在 Chrome 上运行良好，但在 FF 和 IE9 上，当涉及到断词时，它会与文本重叠并丢失轨道。看屏幕截图

在FF和 IE9

在 Chrome 中:

Answer 1

我确实找到了正确答案....

新的 javascript 是(简单得多):

$('#new_postAdDescription').keyup(function (e) {
    var str =$('#new_postAdDescription').val();

    str = str.replace(/\n/g, '<br>');
    str = str.replace(/#([a-zA-Z0-9]+)/g, "<b>#$1</b>");

    $('#new_postAdDescription2').html(str);
});

和在 css 中:

.new_postAdDescription, .new_postAdDescription2{
    position: relative;
    float: left;
    background-color: transparent;
    border: 0;
    outline: 0;
    width: 694px;
    resize: none;
    margin: 10px;
    height: 115px;
    font-size:13px;
    line-height:1.3;
    direction: ltr;
    color:#1c1c1c;
}

.new_postAdDescription2{
    position:absolute;
    color:transparent;
    white-space: pre-wrap;
}
b{
font-weight:bold;
color:#333;
display: inline-block;
white-space: pre-wrap;
word-wrap:break-word;
direction: ltr; 
text-align: left;
max-width: 100%;
}

添加空白:预包装；在正确的地方让它发挥作用。