Javascript Facebook标签（在文本区域内突出显示）

我想像facebook一样，突出显示

文本区域内的文本。解决这个问题的一个方法是保持一个外部div和highlight，如下所示。但是，可能会有多个高亮显示的字段，然后必须在每个瞬间计算位置和宽度，这看起来非常复杂。此外，退格应该立即删除完整的标记。这些
hashtags
可以以何种方式实现，或者任何实现上述相同技术的示例代码

您可以制作如下内容：

<span class="highlighterContent"><b>#html</b> This is </span>



嗨，我叫约翰，今年20岁！
#某物{
宽度：400px；
高度：100px；
边框：1px纯灰；
}
.姓名{
背景：#E1EEF5；
}
高亮显示发生在背景层上，该背景层在keyup事件侦听器上更新（
textarea
是透明的（
背景颜色：rgba（0，​ 0,​ 0,​ 0）
））。如果在文本区域中添加一些
填充顶部
（突出显示没有机会更新），则会出现这种情况：


Facebook的方法实际上非常聪明，当您在文本区域键入内容时，内容将被评估并发送到如下背景元素：

<span class="highlighterContent"><b>#html</b> This is </span>

聪明的是，文本区域后面的跨距有一个透明字体，因此它占用了与文本区域不透明字体相同的空间（允许突出显示与文本区域文本对齐）。那边的聪明人：）
哈哈，真的吗？不知道。我以为这是魔法。我必须进一步调查此事+1顺便说一句，我尝试过这种方法，但使用div的问题是我无法向其中添加占位符。是否可以添加占位符？最糟糕的方法。。。如何识别每个标签的位置。它应该与内容的宽度有关。这里是一个angularjs指令，它创建了一个内容可编辑的div，支持类似facebook的hashtags。类似的逻辑可以用来创建您想要的内容，而不使用angularjs。
.uiMentionsInput .highlighter b {
    background: linear-gradient(#DCE6F8, #BDCFF1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 2px;
    box-shadow: 0 0 0 1px #A3BCEA;
    font-weight: normal;
}