根据从普通文本计算的起始和结束索引，从html代码获取单词的位置 [英] Get position of word from html code given its starting and end index calculated from normal text

问题描述

我有'contenteditable` div并且想知道关于html代码输入的字符索引。

例如：

< div id =    editableDiv contenteditable =   true > 
 @twitter 
 < /   div  >  

句子的格式如下： @twitter

我可以使用下面的函数计算句子中的字符串位置。这是在 @ 键入（开始索引）和空格键键向下调用（结束索引 - 1）

 getCaretPosition： function （）{
  var  element =  document  .getElementById（  editableDiv）; 
  var  caretOffset =  0 ; 
  if （ typeof   window  .getSelection！=   undefined）{
  var  range =  window  .getSelection（）。getRangeAt（ 0 ）; 
  var  preCaretRange = range.cloneRange（）; 
 preCaretRange.selectNodeContents（element）; 
 preCaretRange.setEnd（range.endContainer，range.endOffset）; 
 caretOffset = preCaretRange.toString（）。length; 
} 其他 如果（ typeof   document  .selection！=   undefined&&  document  .selection.type！=  控制）{
  var  textRange =  document  .selection.createRange（ ）; 
  var  preCaretTextRange =  document  .body.createTextRange（）; 
 preCaretTextRange.moveToElementText（element）; 
 preCaretTextRange.setEndPoint（  EndToEnd，textRange）; 
 caretOffset = preCaretTextRange.text.length; 
} 
  return  caretOffset; 
} 

单词 @twitter 中的开始索引为5，结束索引为12上面的句子。



我现在想得到div的innerHTML中相同单词的索引 editableDiv 。



InnerHTML：

< b> < /  < span class =code-leadattribute> b  >  @twitter 

输入索引@twitter这个词：（5,12）

输出 - >

开始指数：12

结束指数：19

解决方案

Basavaraj Metri写道：

问题是：<$ code> @twitter 中的单词索引




（'＃editableDiv'）。text（）不同于


< BLOCKQUOTE>（ '＃editableDiv'）。HTML（）。谢谢

请先阅读我对问题的评论。



As我提到： 文本不包含html标签



看看内部HTML代码：

 <   b  >  <   / b  >  @twitter 

在这种情况下，索引比之前更大，因为您需要在内部html文本中添加符号计数< b>< / b> ：

1. <
2. b'/ LI>
3. >
4. <
5. /
6. b'/ LI>
7. >

当您将 5 添加到 7 你会得到： 12




I have `contenteditable` div and would like to know the index of character typed in it with respect to html code.
For example:



<div id="editableDiv" contenteditable="true">
        the @twitter
    </div>



The sentence is formatted like this: the @twitter
I can calculate the string position in sentence using below function. This is being called on @ keyed down (start index) and on space bar key down (end index - 1)



getCaretPosition : function(){
           var element = document.getElementById("editableDiv");
           var caretOffset = 0;
           if (typeof window.getSelection != "undefined") {
                var range = window.getSelection().getRangeAt(0);
                var preCaretRange = range.cloneRange();
                preCaretRange.selectNodeContents(element);
                preCaretRange.setEnd(range.endContainer, range.endOffset);
                caretOffset = preCaretRange.toString().length;
            } else if (typeof document.selection != "undefined" && document.selection.type != "Control") {
                var textRange = document.selection.createRange();
                var preCaretTextRange = document.body.createTextRange();
                preCaretTextRange.moveToElementText(element);
                preCaretTextRange.setEndPoint("EndToEnd", textRange);
                caretOffset = preCaretTextRange.text.length;
            }
            return caretOffset;
        }



Start index is 5 and end index is 12 for the word @twitter in above sentence.

I would now like to get the index of the same word from innerHTML of the div editableDiv.

InnerHTML:

<b>the</b> @twitter


Input index of the word @twitter: (5,12)
Output ->
start Index : 12
end index: 19

解决方案

Basavaraj Metri wrote:

Problem is: the index of the word "@twitter" in




('#editableDiv').text() is different than




('#editableDiv').html(). Thanks



Please, read my comment to the "question" first.

As i mentioned: text doesn't contains html tags

Have a look at Inner HTML code:


<b>the</b> @twitter


In this case the index is greater then previous because you need to add the count of signs in inner html text <b></b>:


1. <
2. b
3. >
4. <
5. /
6. b
7. >



When you add 5 to 7 you'll get: 12




这篇关于根据从普通文本计算的起始和结束索引，从html代码获取单词的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！