Question

我收到了以下HTML：

<div id="editable_phrase">
   My 
   <span style="background-color: #19FC49;"> first</span> 
   <span style="background-color: #09AC20;"> first</span> //note 2 firsts here
   <span style="background-color: #D2C3EA;"> phrase</span>
</div>

原来的短语是 - 我的第一个短语

我需要在原始短语中找到所选单词的第一个字母的位置。因此，如果我选择（用鼠标突出显示）phrase，我需要得到10（或者它是什么）。我尝试使用charAt()或window.getSelection但仍然得到错误的结果。

此外，如果我选择相同的单词，但是在不同的位置（比如上面我的例子，那里有2个first个单词）我得到相同的结果，因为它找到第一个单词的位置，而我需要第二个。

我可以使用jQuery。任何想法都会受到欢迎。谢谢。

Answer 1

正如您所说，您已经有了选择单词的功能，它就像selectedText一样简单 - 只需将下面的let el = document.getElementById('editable_phrase'); let selectedText = "phrase"; let originalPhrase = el.innerText; console.log(originalPhrase.indexOf(selectedText));替换为<div id="editable_phrase"> My <span style="background-color: #19FC49;"> first</span> <span style="background-color: #D2C3EA;"> phrase</span> </div>即可。单词函数返回，并在选择文本后执行操作：

＆＃13;

private Bitmap[] GetResourceImages()
{
    PropertyInfo[] props = typeof(Properties.Resources).GetProperties(BindingFlags.NonPublic | BindingFlags.Static);
            var images = props.Where(prop => prop.PropertyType == typeof(Bitmap)).Select(prop => prop.GetValue(null, null) as Bitmap).ToArray();

            return images;
}

Bitmap[] cards = GetResourceImages();
int maxValue = cards.Length;
Random rand = new Random();
int idx = rand.Next(maxValue);
currentPic.Image = cards[idx];

＆＃13;

$Text = "Apple Pear Peach Banana"

＆＃13;

Answer 2

遍历div的子节点，并将它们连接到一个字符串，直到达到所需的值，然后返回它的长度。例如，像这样： var str =“”;

var bool = false;
$('#editable_phrase').children().each(function(){
    if ($(this).text() == "phrase")
        bool = true;
    if (!bool)
        str+=$(this).text();
});

Answer 3

这是一个结合baao's answer和 ~~Joseph Marikle's answer~~ 的答案（此后已被删除）。

selection.anchorNode.textContent获得突出显示的字词。

＆＃13;

$("#editable_phrase").bind('mouseup', function(e) {
  var selection;
  var selectedWordPos;
  if (window.getSelection) {
    selection = window.getSelection();
  } else if (document.selection) {
    selection = document.selection.createRange();
  }
  selectedWordPos = $("#editable_phrase").text().replace(/\s\s+/g, ' ').indexOf(selection.anchorNode.textContent.replace(/\s\s+/g, ' '));
  console.log(selectedWordPos);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable_phrase">
  My
  <span style="background-color: #19FC49;"> first</span>
  <span style="background-color: #D2C3EA;"> phrase</span>
</div>

＆＃13;

Javascript在包含HTML的字符串中查找单词的位置

3 个答案: