Javascript 我有一个contentEditable=“true”的div，需要为输入的数字上色

这是我的代码，它可以很好地为可编辑div中的数字着色，但光标将指向div的开头，当我按键盘箭头按钮遍历字符串时，它应该正常工作，而且当我单击home和end按钮时，光标应该按预期运行

jQuery(document).ready(function(){

       $("#richTextField").keyup(function() {

          var divContent = $(this).text();

          var pattern = /(\d)/g;

          var replaceWith = '<span class="numberClass"'+ '>$1</span>';


          var highlighted = divContent.replace(pattern,replaceWith);


          $(this).html(highlighted);

       });

    });

---

elimate您不想运行函数的键，类似这样的东西，即应该正常运行

$("#richTextField").keyup(function(e) {
    var excludeKeyCodes = [8, 9, 13, 46, 35 ,36 ,37, 38, 39, 40];
    if( !$.inArray(e.which, excludeKeyCodes ))
    {
        var divContent = $(this).text();
        var pattern = /(\d)/g;
        var replaceWith = '<span class="numberClass"'+ '>$1</span>';
        var highlighted = divContent.replace(pattern,replaceWith);        
        $(this).html(highlighted);
    }
});

供参考

快速总结

8-退格， 9-选项卡， 13-进入， 46-删除， 35-完， 36-家，

---

37,38,39,40-向左、向上、向右、向下的箭头如下所示：

jQuery(document).ready(function () {

    $("#richTextField").keyup(function () {

        var divContent = $(this).text().split('');
        var pattern = /(\d)/;
        var replaceWith = '<span class="numberClass"' + '>$1</span>';
        var highlighted = divContent.map(function (u) {
            if (pattern.test(u)) return $(u.replace(pattern, replaceWith));
            else return document.createTextNode(u);
        });

        var caretPos = getCaretCharacterOffsetWithin(this);

        $(this).empty().append(highlighted);

        setCursor(this, caretPos);
    });
});

function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
}

function setCursor(node, pos) {
    if (!node) {
        return false;
    } else if (document.createRange) {
        range = document.createRange();
        range.selectNodeContents(node);
        range.setStart(node, pos);
        range.setEnd(node, pos);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (node.createTextRange) {
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    } else if (node.setSelectionRange) {
        node.setSelectionRange(pos, pos);
        return true;
    }
    return false;
}

JS Fiddle上提供了一个工作演示：

代码片段取自：

---

你能准备一个吗？使用DOM插入方法，而不是html。嗨，Alex，你能提供更多关于DOM插入方法的详细信息吗…关于我的问题的工作演示，请参阅下面的线程…提前谢谢。嗨，Marc，这是工作演示。你好，Ojay，谢谢你回答我的问题。在某些情况下，您的解决方案可能会对我有用，但在这种情况下不会。当我们试图修改内部html或将一些html标记附加到可编辑的div内容时，默认行为会随着光标位置移到div的开头而改变，即使我们跳过了上面的一些键的功能。希望你能理解我的问题。这是工作演示。a看一看，让我知道你的建议。嗨，内森，你的解决方案看起来很完美。谢谢你在这方面花时间。然而，我注意到一个问题，需要解决我的情况。当我尝试使用Shift+Home或Shift+end关键字组合时，此解决方案不起作用，因为光标未按预期移动。当光标指向结束位置时，它不允许您选择文本。你能就此提出建议吗。