JS直播突出显示

Question

我试图将JS中的css编辑器作为jquery插件。 到目前为止，我设法制作静态荧光笔。 “那”是$（可编辑的div）

 var temp = '';
        var re = /([^{}]+)\s*{/g;
        while (m = re.exec(plainCss))
        {
            var end = plainCss.indexOf('}', m.index + m[1].length);
            temp += '<span class="selector">' + plainCss.substring(m.index, m.index + m[1].length) + '</span>';
            temp += '<span class="brace">{</span>';
            temp += '<span class="body">' + plainCss.substring(m.index + m[1].length + 1, end) + '</span>';
            temp += '<span class="brace">}</span>';
        }
        that.html(temp);

        that.find('.body').each(function(i, elem)
        {
            var text = $(elem).text();
            var re = /([^:;]+):([^:;]+);/g;
            var temp = '';
            while (m = re.exec(text))
            {
                temp += '<span class="rule">' + m[1] + '</span>';
                temp += '<span class="colon">:</span>';
                temp += '<span class="value">' + m[2] + '</span>';
                temp += '<span class="semicolon">;</span>';
            }
            $(elem).html(temp);
        });

现在我想在打字时让它突出显示。我注册了keypress事件，确定哪个“范围”是用户（选择器，正文（规则，值））并相应地包装书写字符。 问题是可编辑div中的插入位置。例如。当用户点击

时

<span class='semicolon'>;</span>

并写了一些东西，我阻止了那个事件，之后插入<span class='rule'>{new_character}，光标（插入符号）位置就是上次的位置。 我尝试了一些用于插入符号的jquery插件，但没有真正有效... 如果这是一个好的方法，我不会感到害羞，你会做什么才能做出高效的工作？