如何获取选定的文本范围并向特定选定的文本添加颜色

我遇到了一个问题，我有这样的描述性原始文本 -

<p>I am using the following code to change the color of text but it is not working.. Can anyone help me with this? the soloution in javascript or jquery anything is fine..</p> 

现在我的要求是

• 在鼠标按下事件上查找特定选定文本的位置（范围）
• 在整个操作过程中对选定的文本进行着色

我写的代码

    $(document).ready(function() {
            if (!window.Wafer) {
                Wafer = {};
            }
            Wafer.Selector = {};

            /* Function to get selected string as a object
             *  works for all browser and also handle for old browser like
             * ie9,firfox 18 as discussed
             */
            Wafer.Selector.getSelected = function() {

                $selObj = '';
                if (window.getSelection) {
                    $selObj = window.getSelection();
                } else if (document.getSelection) {
                    $selObj = document.getSelection();
                } else if (document.selection) {
                    $selObj = document.selection.createRange().text;
                }
                //console.log($selObj);
                return $selObj;
            }
            //holding the selector string in variable on mouseup event
            Wafer.Selector.mouseup = function() {
                $selector = Wafer.Selector.getSelected();
                $start = $selector.anchorOffset;
                $end = $selector.focusOffset;
                console.log($start, $end);
                //I call this to wrap selected text under span 
                selectText('#f90');
            }
            //This will tell jquery to fire when "mouseup" event will occur
            $(document).on("mouseup", Wafer.Selector.mouseup);
        });

        function selectText(hexColor) {
            var selection = window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            var span = document.createElement('span');
            span.style.backgroundColor = hexColor;
            span.className = 'selected-text';
            span.appendChild(selectedText);
            selection.insertNode(span);
        }

在功能上选择文本我曾经得到过window.getSelection().getRangeAt(0);这可能会与window.getSelection()两者都返回具有锚点偏移 and 焦点偏移键因此无法获得正确的文本范围

有什么方法可以清除选定的文本范围吗？

关注了几个堆栈帖子，例如this https://stackoverflow.com/questions/17288964/how-to-change-color-of-the-selected-text-dynamically-on-click-of-button但这些部分满足了我的要求并且有错误的代码。 提前致谢。

有此问题的人可以通过以下方式获得帮助——

$("#text-box").mouseup(function () {
    var el = document.getElementById("text-box");
    getCaretCharacterOffsetWithin(el);
});

获取选择并查找开始和结束范围的函数每次从父容器.

 function getCaretCharacterOffsetWithin(element) {
    var caretOffset = 0;
    var doc = element.ownerDocument || element.document;
    var win = doc.defaultView || doc.parentWindow;
    var sel;
    if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var range = win.getSelection().getRangeAt(0);
            var preCaretRange = range.cloneRange();
            preCaretRange.selectNodeContents(element);
            preCaretRange.setEnd(range.endContainer, range.endOffset);
            caretOffset = preCaretRange.toString().length;
        }
    } else if ((sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    var start = caretOffset - sel.toString().length;
    var end = caretOffset - 1;
    if (start != end && end > start) {
        // Highlight the text
        console.log(start,end);
        var selectedText = range.extractContents();
        var text_value = selectedText.textContent;
        var span = document.createElement('span');
        span.style.backgroundColor = "red";
        span.className = 'selected-text';
        span.appendChild(selectedText);
        range.insertNode(span);
        $(".span").html(start + ", " + end);
        return caretOffset;
    }
}

你的 HTML 可能是这样的

<div id="text-box" style="width: 700px; border:1px solid black">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>

我还添加了span用于包裹所选范围文本的标签mouseup事件，因为我有一个要求添加颜色到得到的字段selected。希望这会有所帮助。 :-)