有没有这样的前端组件？寻思许久，仍未发现合适的解决方案。

LZ看一下富文本编辑器实现吧

angularjs的双向绑定?

能不能这样?
```
<div>
<span contenteditable>亲爱的</span><label>张三</label><span contenteditable>, 你于</span><label>2014年11月21日</label><span contenteditable>通过</span><label>网上交易</label><span contenteditable>提交了</span><label>认购申请</label>
</div>
```

自己写一个呗！

我觉得 ng 满足了!

@tsingyi 这种方式太复杂
@kmvan 这不先看看有没有现成的轮子，没有的话再自己创造轮子么，节省时间
@DaniloSam 这个可以实现效果，但无法区分宏和普通文字
@jimwoo ng是什么？

@Aegwynn angular~哈哈

早上刚用ng写了个内容局部高亮显示的input，不过你想要的label在编辑的时候比较麻烦，莫非用多个input来组成。。。

这很简单，本质上就是写一个template parser，A中渲染parser生成的AST，预览里渲染给parser传入数据后的生成结果。
比如可以定义语法：[[标签名]]
样例输入的纯文本表示就变成：亲爱的[[客户姓名]]，你于[[申请时间]]通过[[申请方式]]提交了[[申请事项]]
这样的parser可以通过正则式简单的实现，调用API形如：
```
var parser = new Parser();
var template = parser.parse(”亲爱的[[客户姓名]]，...");
```
template是一个token array：
```
[{type: text, data: "亲爱的"}, {type: label, name: "客户姓名" }...]
```

在A里面，你把这个array撸一遍，生成：
```
<span>亲爱的</span><span class="label">客户姓名</span>...
```

B里面的内容通过调用类似如下的API：
```
tempate.generate({"客户姓名": "akfish", ...})
```
简单的替换token array里的label token就能生成：
```
<span>亲爱的</span><span class="whatever">akfish</span>...
```

最核心的流程就是以上这些，剩下的CSS, JS交互神马的很容易。

楼主要的是angularjs

@tremblingblue 是的，高亮显示这都不是问题，关键是label
@akfish 单凭这么详细的回复，就该点个赞啊。通读下来，template解析很容易实现，但有个最关键的问题：宏的完整性，比如[[申请时间]]，这必须要是一个整体，避免误操作出现[[申请的时间]]这样的。

@Aegwynn 检查[[]]之间的标签名是否是在允许的列表内，不是的话要么报错，要么当做普通文本处理。
或者用户的输入都当做纯文本处理，不对用户暴露这一内部表示语法，只有用UI才能插入标签。
方法很多，就看你具体要怎么处理了。

ng或者vue


vue.js
http://vuejs.org/