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

，但不会考虑 HTML 的

<span>

元素。

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

Answer 2

const range = Selection.getRangeAt(0); const newTag = document.createElement(tag);

range.surroundContents(newTag);