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

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

正如您所说，您已经有了一个获取单词选择的函数，它就像 indexOf() 一样简单 - 只需将下面的 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>