用户选择 - 获取参考以供将来使用

首先，您应该尝试使用 PRE 标签，这样您就不必对段落执行 BR

其次，你必须得到选择。为此，我建议使用 Rangy JS 库。有了它，您可以通过以下方式获得范围：

var selection = rangy.getSelection();
var sel_start = selection.anchorOffset;
var sel_end = selection.focusOffset;

然后，您可以在文本中的位置插入格式化程序元素。

文本"当然是HTML格式"以查找并在将来突出显示它并不容易。

在我看来，最好的方法应该是这样的：

从用户输入中获取所选文本的[开始，结束]点（在js中它将只是一个整数）并保存它，然后您可以通过普通js或jquery插件突出显示它或在其周围制作矩形（将起点和终点发送到您的文本荧光笔功能）。不要忘记，当您的格式化HTML没有更改时，所有这些工作都可以正常工作！

我过去有类似你项目的东西，所以我做了这个：

$(document).ready(function(){
$(document.body).bind('mouseup', function(e){
        var selection;
        if (window.getSelection) {
          selection = window.getSelection();
        } else if (document.selection) {
          selection = document.selection.createRange();
        }
        selection.toString() !== '' && alertSelection(selection.toString(),e.pageX, e.pageY);
//e.pageX + '/' + e.pageY
    });
function getSelectionCharOffsetsWithin(element) {
    var start = 0, end = 0;
    var sel, range, priorRange;
    if (typeof window.getSelection != "undefined") {
        range = window.getSelection().getRangeAt(0);
        priorRange = range.cloneRange();
        priorRange.selectNodeContents(element);
        priorRange.setEnd(range.startContainer, range.startOffset);
        start = priorRange.toString().length;
        end = start + range.toString().length;
    } else if (typeof document.selection != "undefined" &&
            (sel = document.selection).type != "Control") {
        range = sel.createRange();
        priorRange = document.body.createTextRange();
        priorRange.moveToElementText(element);
        priorRange.setEndPoint("EndToStart", range);
        start = priorRange.text.length;
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    };
}

function alertSelection(text,x,y) {
    var mainDiv = document.getElementById("article");
    var sel = getSelectionCharOffsetsWithin(mainDiv);
alert(sel.start + ": " + sel.end + ' ' + text);
}
});

这是一个使用一点jquery的完整解决方案，希望它能帮助:)