jQuery文本突出显示并保留html

Question

我正在尝试创建jquery，它将允许通过鼠标突出显示选中的文本，包括多个选择（例如，三个单独的部分）。 当前，我有以下代码 ，但是此代码遇到了以下问题：

1. 它允许单选（虽然我希望可以选择第一个句子，然后选择第三个句子并分别标记它们）。
2. 因为它基于正则表达式工作，所以当我选择单个字母（例如“ a”）时，所有字母都被选中。
3. 样式（例如粗体）不会保留。

请告知我如何改进此脚本以解决上述问题。 谢谢！

js代码：

enableHighlights(".mainPane");


function enableHighlights(thisDiv) {
    $(thisDiv).on("mouseup", function () {
        var selectedText = getSelectionText();
        var selectedTextRegExp = new RegExp(selectedText);
        var text = $(this).text().replace(selectedTextRegExp, "<span class='red'>" + selectedText + "</span>");
        $(this).html(text);
        $('#selection').html(selectedText);
    });
}

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().htmlText;
    }
    return text;
}

Answer 1

这是我所能接近的正确答案： DEMO

enableHighlights(".mainPane");

var sText=[],
    sStart=[];
function enableHighlights(thisDiv) {
    var initialHTML=$(thisDiv).html();
    var theHTML='';
    $(thisDiv).on("mouseup", function () {
        var selectedText = getSelectionText();
        var selectedRange=getSelectionRange($(thisDiv)[0]);
        sText.push(selectedText);
        sStart.push(selectedRange.start);
        theHTML=initialHTML;
        $.each(sText,function(i,v){
            var selectedTextRegExp = new RegExp(v);
            var usingHTML=theHTML.slice(sStart[i]-1);
            var text = usingHTML.replace(selectedTextRegExp, "<span class='red'>" + v + "</span>");
            theHTML=theHTML.slice(0,sStart[i]-1)+text;
        });
        $(this).html(theHTML);
        $('#selection').html(selectedText);
    });
}

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().htmlText;
    }
    return text;
}
function getSelectionRange(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
    };
}

唯一的问题是，当您尝试同时选择粗体和普通文本时，我找不到解决方法！