Javascript 自定义输入字段

我需要自定义输入文本，类似于StackOverflow的标记编辑器的工作方式，但有一些细微的差别。基本上，我希望输入充当一个普通的文本输入字段，直到用户将一个单词括在大括号内。然后，这应该成为一个“不同的元素”，具有不同的样式和行为。比方说，我希望能够点击它，这将打开一些弹出对话框等，其余的文本将保持正常

创造这样的东西有多困难？e、 g:

看到了吗？您将键入“Lorem ipsum{dolor”，一旦关闭卷曲“{dolor}”，就会获得橙色背景，变得可点击，等等（在本例中，在卷曲括号内键入“dolor”和“amet”）

非常类似于SO上的标签编辑器的工作方式。除了SO使标签始终浮动到左侧，我不希望浮动

---

你见过类似的例子吗？或者你能分享一些想法吗？

只要在用户键入内容时向一些

p

、

div

或

span

标记中添加输入文本即可。将任何

{

替换为

（或任何其他标记元素），将

替换为

。将单击事件添加到此标记中

$（文档）。在（“单击粘贴更改输入”，“输入”，函数（））{
$（“#显示”）.html(
$（this.val（）.replace（“{”，”）.replace（“}”，”）
);
});
$（文档）。在（“单击”，“显示”，函数（）上）{
$（“输入”）.focus（）；
});
$（文档）。在（“单击”上，“显示范围”，功能（e）{
e、 预防默认值（）；
警报（$（this.text（））；
})

#显示范围{
背景颜色：黄色；
光标：指针；
}
输入{
不透明度：0.1；
位置：相对位置；
z指数：5；
顶部：50px；
}
#展示{
位置：绝对位置；
左：0；
排名：0；
z指数：4；
背景色：#ddd；
高度：20px；
宽度：100%；
线高：20px；
}

单击开始键入

我认为这是无效的答案，假设用户多次键入

{{{{

这就是html语义的原因，我们的脚本将在跨度内增加四倍的跨度。我认为正则表达式对于这类事情来说肯定是更好的选择。@SyedArifIqbal是的，我知道，但这只是一个如何做的示例。还有很多工作要做。但到目前为止，它正在做它的工作。