使用 contenteditable div 需要更好的 SQL 语法高亮

Question

我知道类似的问题以类似的方式被问过很多次，但鉴于我对此感到满意......

目标： 我想要一个类似textarea（div contenteditable）的东西，用户可以在其中输入一些SQL。当用户输入 SQL 时，一些流行词如“SELECT”、“FROM”.... 应该被着色。但是解决方案应该是流畅的，不会丢失光标位置并接受新行。如果后记正确的话应该可以改变颜色。

我尝试过的解决方案：

方式一：Change color of specific words in textarea

我尝试将每个单词都包装起来并放置一个 span arround，就像链接中的示例一样。 问题：

• 新行将被删除
• 无法添加包含文本后缀的空格
• 光标总是在末尾​​li>

方式2：正则表达式（我再也找不到链接了）

不要使用“$(this).text()”而是使用“$(this).html()”，删除所有标签（没有换行符/换行符）并使用正则表达式再次为单词着色。单词是彩色的，新行仍然存在，但光标位置丢失：/ 所以我尝试保存当前光标位置并在最后恢复它......但它不起作用......这是我当前的代码：

$("#SQL_editor").on("keyup", function(e){
            if (e.keyCode == 32){
                saveSelection();

                var pureHtml = $(this).html();
                pureHtml = pureHtml.replace(new RegExp('<span class="statement">', 'g'),  '');
                pureHtml = pureHtml.replace(new RegExp('</span>', 'g'),  '');
                pureHtml = pureHtml.replace(new RegExp('SELECT ', 'g'),  '<span class="statement">SELECT </span>');
                pureHtml = pureHtml.replace(new RegExp('FROM ', 'g'),  '<span class="statement">FROM </span>');
                pureHtml = pureHtml.replace(new RegExp('WHERE ', 'g'),  '<span class="statement">WHERE </span>');
                pureHtml = pureHtml.replace(new RegExp('NULL ', 'g'),  '<span class="statement">NULL </span>');
                pureHtml = pureHtml.replace(new RegExp('ON ', 'g'),  '<span class="statement">ON </span>');
                pureHtml = pureHtml.replace(new RegExp('IN ', 'g'),  '<span class="statement">IN </span>');
                pureHtml = pureHtml.replace(new RegExp('LIKE ', 'g'),  '<span class="statement">LIKE </span>');
                pureHtml = pureHtml.replace(new RegExp('NOT ', 'g'),  '<span class="statement">NOT </span>');
                $(this).html(pureHtml);

                restoreSelection();
                //placeCaretAtEnd($("#SQL_editor").get(0));
            }
        });



function saveSelection(){
                console.log("save");
                if(window.getSelection)//non IE Browsers
                {
                    savedRange = window.getSelection().getRangeAt(0);
                }
                else if(document.selection)//IE
                { 
                    savedRange = document.selection.createRange();  
                } 
            }

            function restoreSelection(){
                isInFocus = true;
                document.getElementById("SQL_editor").focus();
                if (savedRange != null) {
                    if (window.getSelection) {//non IE and there is already a selection{

                        var s = window.getSelection();
                        if (s.rangeCount > 0) 
                            s.removeAllRanges();
                        s.addRange(savedRange);
                    } else if (document.createRange)//non IE and no selection
                    {
                        window.getSelection().addRange(savedRange);
                    } else if (document.selection)//IE
                    {
                        savedRange.select();
                    }
                }
            }

不幸的是，它不起作用。目前光标焦点始终在开头。但它不应该总是在开头，也不应该总是在结尾......它应该在用户键入空格的这个位置（在适当的行中）......

任何人都可以帮助我解决这个问题，或者假设一个新的，效果更好吗？

非常感谢

V

Answer 1

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

placeCaretAtEnd( document.getElementById("content") );

这个问题已经问过了：contenteditable, set caret at the end of the text (cross-browser)