window.getSelection()偏移HTML标签?

时间:2013-03-03 01:29:51

标签: javascript jquery selection

如果我有以下HTML:

<div class="content">
Vivamus <span>luctus</span> urna sed urna ultricies ac tempor dui sagittis.
</div>

我在mouseup上运行了一个可以看到所选文本范围的事件:

$(".content").on("mouseup", function () {
    var start = window.getSelection().baseOffset;
    var end = window.getSelection().focusOffset;
    if (start < end) {
        var start = window.getSelection().baseOffset;
        var end = window.getSelection().focusOffset;
    } else {
        var start = window.getSelection().focusOffset;
        var end = window.getSelection().baseOffset;
    }
    console.log(window.getSelection());
    console.log(start + ", " + end);
});

我从内容中选择了Vivamus这个词,它会记录1, 8,因为这是选择的范围。

如果,我选择单词urna,它会记录15, 20,但不会考虑<span>元素HTML。

focusOffsetbaseOffset是否还要计算HTML标记,而不仅仅是文本?

1 个答案:

答案 0 :(得分:6)

<强>更新

直播示例:http://jsfiddle.net/FLwxj/61/

Using a clearSelection() functiona replace approach,我能够达到预期的效果。

var txt = $('#Text').html();
$('#Text').html(
    txt.replace(/<\/span>(?:\s)*<span class="highlight">/g, '')
);
clearSelection();

来源:


您将在下面找到解决问题的方法。我按照代码效率的顺序放置它们。

工作解决方案

  • https://stackoverflow.com/a/8697302/1085891live example

    window.highlight = function() {
        var selection = window.getSelection().getRangeAt(0);
        var selectedText = selection.extractContents();
        var span = document.createElement("span");
        span.style.backgroundColor = "yellow";
        span.appendChild(selectedText);
        span.onclick = function (ev) {
        this.parentNode.insertBefore(
            document.createTextNode(this.innerHTML), 
            this
        );
        this.parentNode.removeChild(this);
        }
        selection.insertNode(span);
    }
    
  • https://stackoverflow.com/a/1623974/1085891live example

    $(".content").on("mouseup", function () {
       makeEditableAndHighlight('yellow'); 
    });
    
    function makeEditableAndHighlight(colour) {
        sel = window.getSelection();
        if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
        }
        // Use HiliteColor since some browsers apply BackColor to the whole block
        if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
        }
        document.designMode = "off";
    }
    
    function highlight(colour) {
        var range, sel;
        if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
            makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
        } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
        }
    }
    
  • https://stackoverflow.com/a/12823606/1085891live example

其他有用的解决方案: