window.getSelection（）偏移HTML标签？ [英] window.getSelection() offset with HTML tags?

问题描述

如果我有以下HTML：

If I have the following HTML:

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

我在 mouseup 上运行一个事件查看所选文本的范围：

And I run an event on mouseup that sees the ranges of the selected text:

$(".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 ，因为这是选择的范围。

And I select the word Vivamus from the content, it will log 1, 8, as that is the range of the selection.

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

If, however, I select the word urna, it will log 15, 20, but won't take into account the <span> elements of the HTML.

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

Is there anyway for focusOffset and baseOffset to also count for HTML tags, instead of just the text?

推荐答案

更新

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

使用 clearSelection（）功能和替换方法，我能够达到预期的结果。

Using a clearSelection() function and a replace approach, I was able to achieve the desired result.

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

• clearSelection(): https://stackoverflow.com/a/6562764/1085891
• Replace approach: https://stackoverflow.com/a/7168142/1085891

下面你会找到一些有用的解决方案你的问题。我按照代码效率排列它们。

Below you'll find some working solutions to your problem. I placed them in order of code efficiency.

工作解决方案

• 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

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

这篇关于window.getSelection（）偏移HTML标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！