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选项

回答

相关问题