facebook喜欢hashtags – 自动换行：break-word; 不适用于FF和IE9 +
我正在尝试插入一个只要在keyup ，就会检测到# （就像Facebook一样）。 我从textarea读取，并复制到div元素。
请看我如何更换白色空格和新线条。 我试过了 同样（顺便说一句，如果我删除空格匹配，一切正常！）
$('#new_postAdDescription').keyup(function (e) { var str = $('#new_postAdDescription').val(); str = str.replace(/ /g, ' '); str = str.replace(/\n/g, '
'); str = str.replace(/( |
)#([a-zA-Z0-9]+)/g, "$1#$2"); $('#new_postAdDescription2').html(str); });
//风格
.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+ */ }
这不是最好的，但它适用于Chrome，但在FF和IE9上，当涉及到破坏这个词时，它会重叠文本并失去跟踪。 看屏幕截图
在FF和IE9
在Chrome ：
我确实找到了正确答案….
新的JavaScript是（更简单）：
$('#new_postAdDescription').keyup(function (e) { var str =$('#new_postAdDescription').val(); str = str.replace(/\n/g, '
'); str = str.replace(/#([a-zA-Z0-9]+)/g, "#$1"); $('#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%; }
添加白色空间：预包装; 在正确的地方使它工作。