我有一个 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);

       });

    });

以下内容可以满足您的要求：

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 提供了一个工作演示：http://jsfiddle.net/B3PgU/ http://jsfiddle.net/B3PgU/

代码片段取自：

https://stackoverflow.com/a/4812022/1662998 https://stackoverflow.com/a/4812022/1662998

https://stackoverflow.com/a/2920149/1662998 https://stackoverflow.com/a/2920149/1662998