jQuery獲取html選項

我一直在線上搜索一會兒，試圖找到解決方案。我想要做的是將文本選擇開始和結束點轉換爲其等效的html選擇值。jQuery獲取html選項

實施例：

HTML: test text **some <span style="color:red">te**st t</span>ext 
TEXT: test text **some te**st text

所以說，用戶選擇在包圍**上面的部分。我沒有問題得到文本選擇的位置：開始：10，結束：17。但我想得到的是包括html元素的選擇位置：開始：10，結束：41

任何人都可以爲此提出一個解決方案？

編輯：根據要求我附上了我現有的代碼，它獲取所選文本的開始和結束點。我想得到的是所選HTML的開始和結束點。

 var start = 0, end = 0; 
     var sel, range, priorRange; 
     if (typeof window.getSelection != "undefined") { 
       range = window.getSelection().getRangeAt(0); 
       priorRange = range.cloneRange(); 
       priorRange.selectNodeContents(el[ 0 ]); 
       priorRange.setEnd(range.startContainer, range.startOffset); 
       start = priorRange.toString().length; 
       end = start + range.toString().length; 
     } else if (typeof document.selection != "undefined" && 
       (sel = document.selection).type != "Control") { 
       range = sel.createRange(); 
       priorRange = document.body.createTextRange(); 
       priorRange.moveToElementText(el[ 0 ]); 
       priorRange.setEndPoint("EndToStart", range); 
       start = priorRange.text.length; 
       end = start + range.text.length; 
     }

來源

2013-03-21 conor

請發佈您已經嘗試過的代碼。理解這個問題有點困難。 – Lowkase 2013-03-21 13:23:11

這很難，因爲用戶並沒有真正選擇HTML，並且它已經被瀏覽器解析過，所以它不再像HTML一樣以DOM元素的形式存在。例如，可以使用HTML內容和跳過標籤開始計算字母。 – JJJ 2013-03-21 13:26:01

請注意，像&這樣的html實體將被選爲一個字符，但會在html中爲多個。和相鄰的空格將是一個選定的字符，但在html中是多個。 – 2013-03-21 13:31:10

好吧，這是我提出的解決方案。它獲得正常的文本選擇點，然後原始轉換爲html點。這可能只適用於基本情況，但這是我的應用程序所需要的。

 // this gives me a cross browser start and end position 
     // for the text selection 
     var start = 0, end = 0; 
     var sel, range, priorRange; 
     if(typeof window.getSelection != "undefined"){ 
       range = window.getSelection().getRangeAt(0); 
       priorRange = range.cloneRange(); 
       priorRange.selectNodeContents(el[ 0 ]); 
       priorRange.setEnd(range.startContainer, range.startOffset); 
       start = priorRange.toString().length; 
       end = start + range.toString().length; 
     } 
     else if(typeof document.selection != "undefined" && (sel = document.selection).type != "Control"){ 
       range = sel.createRange(); 
       priorRange = document.body.createTextRange(); 
       priorRange.moveToElementText(el[ 0 ]); 
       priorRange.setEndPoint("EndToStart", range); 
       start = priorRange.text.length; 
       end = start + range.text.length; 
     } 

     // now, get this in terms of html selection 
     var html = el.html(), text = 1, htmlstart = 0, htmlend = 0; 
     for(var i = 0, t = 0; i < html.length; ++i){ 
       if(html[ i ] == '<' || html[ i ] == '>'){ 
         text = text ? 0 : 1; 
         continue; 
       } 
       if(text) 
         t++; 
       if(t == start) 
         htmlstart = i + 1; 
       if(t == end){ 
         htmlend = i + 1; 
         break; 
       } 
     }

來源

2013-03-21 13:55:26 conor

jQuery獲取html選項

回答

相關問題