window.getSelection（）偏移HTML标签？

Question

如果我有以下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元素。

无论如何， focusOffset和baseOffset还要计算HTML标签，而不仅仅是文本？

Answer 1

更新

实例： http ： //jsfiddle.net/FLwxj/61/

使用clearSelection()函数和替换方法 ，我能够实现所需的结果。

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

资料来源：

• clearSelection() ： https ： //stackoverflow.com/a/6562764/1085891
• 替换方法： https ： //stackoverflow.com/a/7168142/1085891

---

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

工作方案

• https://stackoverflow.com/a/8697302/1085891 （ 实例 ）

   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/1085891 （ 实例 ）

   $(".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/1085891 （ 实例 ）

其他有用的方案：

• http://tech.pro/tutorial/1075/javascript-highlighting-selected-text