javascript - 创建 Facebook 帖子预览

Question

我们有一个网站，允许客户将图片和视频直接发布到他们的粉丝专页墙上。我们的一些客户要求对文本进行“发布预览”，以便他们在将文本提交到 Facebook 后查看单词的对齐方式。

所以，我的工作就是实现这个，到目前为止我所做的是:

帖子正文写在textarea中:

 <textarea id="fbMessage" name="message" placeholder="Enter your message here" rows="4" cols="47"></textarea>

我创建了一个将用作帖子预览的 div，我将其宽度设置为类似于 Facebook 中用户内容文本的实际 div。在 div 中，我创建了一个段落来获取文本，段落字体样式设置与 Facebook 用户内容文本样式完全相同:

<div id="preview" style="margin: 10px auto; width:366px; background: #EDEDED; border: solid 1px #CCC; padding: 10px; word-wrap: break-word;">
   <p id="previewText" style="font-size: 13px; font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;">Facebook Preview</p>          
</div>

我使用 word-wrap: break-word; 来强制文本换行。

最后一件事是将文本从 textarea 复制到预览 div 的 Javascript:

var form = document.getElementById('newFBForm');
var TheTextBox = document.getElementById("fbMessage");
var textAreaText = TheTextBox.value;

//Is used to preserve whitespace and new lines from the textarea to the div//    
previewText = textAreaText.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp");

document.getElementById('previewText').innerHTML = previewText;

我的问题是，有时我的预览会像在 Facebook 上一样对齐，下面是一个示例:

• 在 Facebook 上:

• 在我的预览 div 上:

但有时我会得到不同的对齐方式，这里是示例:

• 在 Facebook 上:

• 在我的预览 div 上:

您可以看到 word11111111 的问题。这只是一个示例，但不同的文本结构会产生与实际帖子不同的预览。

我错过了什么吗？或者我的实现有问题吗？您有改进或添加内容的想法吗？

更新

当尝试使用 word-wrap: normal; 时会发生什么:

Answer 1

//Is used to preserve whitespace and new lines from the textarea to the div//    
previewText = textAreaText.replace(/\n/g, "<br/>").replace(/\s/g, "&nbsp");

你正在用一个不间断的空格替换每个空白字符(替换\n后剩下的)——当然，即使使用word-wrap，这也会给你带来奇怪的效果:normal ……因为您实际上是在使每一行文本成为一个“单词”，因为 actual 单词之间的空格是禁止被打断的……