window.getSelection() Offset mit HTML-Tags?

Question

Wenn ich habe folgende HTML:

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

Und ich laufe ein Event auf mouseup, die die Bereiche des ausgewählten Textes sieht:

$(".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); 
}); 

Und ich wählen Sie das Wort Vivamus aus dem Inhalt es, wird 1, 8 protokollieren, da dies der Bereich der Auswahl ist.

Wenn ich aber das Wort urna wählen, wird es 15, 20 einzuloggen, wird aber nicht berücksichtigt, die <span> Elemente des HTML.

Gibt es sowieso für focusOffset und baseOffset, um auch für HTML-Tags statt nur den Text zu zählen?

Answer 1

aktualisieren

anschauliches Beispiel: http://jsfiddle.net/FLwxj/61/

Using a clearSelection() function und a replace approach, konnte ich das gewünschte Ergebnis erzielen.

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

Quellen:

• clearSelection(): https://stackoverflow.com/a/6562764/1085891
• Ansatz ersetzen: https://stackoverflow.com/a/7168142/1085891

---

Im Folgenden finden Sie einige Arbeitslösungen für Ihr Problem finden. Ich habe sie in der Reihenfolge der Codeeffizienz platziert.

Working-Lösungen

• https://stackoverflow.com/a/8697302/1085891 (live 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/1085891 (live 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/1085891 (live example)

Weitere hilfreiche Lösungen:

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