先上图

![在这里插入图片描述](https://img-blog.csdnimg.cn/c070cde11a314c45a859ccb0ca7f41c7.png
产品经理的需求是编辑框中用了占位符的话，占位符中的变量高亮，简单吧！还有一个附加要求，必须是外部定义的变量，不是只用{{}}来区分的，从图中也能看到{{xxx}}就没有高亮。

接到这个需求我的第一反应是想跟产品经理说，这个需求提的很好，下次别提了，哈哈，开玩笑的。

我第一反应想到了用codemirror，以我对codemirror不多的理解，这个需求应该用语言高亮的功能能实现，毕竟我也简单的用过@codemirror/lang-javascript。然后我就开始研究语言包怎么写。研究结果是，语言包只能给定规则，这是用Lezer定义的上下文无关文法实现的，但是我没想到动态传入变量的方法，也就是解决不了上图中{{xxx}}不高亮的问题。

开始了啃codemirror文档的漫长之旅。我参考了文档https://codemirror.net/examples/decoration/中添加下划线的代码，基本实现了使用我想要的功能，不过不完善。

然后把这个需求的优先级放低，先做手上的工作，有空就研究codemirror文档。其实也没啥空。也就昨天下午到今天有空，不死心又去啃文档了。今天终于解决了！最终的解决方案是借鉴了@codemirror/search中的代码实现的

看codemirror的源码发现自己的能力差太多了，好羡慕人家那么强的能力，有空我想通读一下codemirror的源码，一想到它里面对字符串的操作算法我就头大，根本看不懂:)

代码有空在写进来，今天就这样

如果您觉得对您有帮助，请点赞哦:)