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。任何想法都会受到欢迎。谢谢。

- Masha

---

这听起来像是一个X Y问题，你想用那个位置做什么？ - Hodrobond

我需要将其存储在数据库中，然后对整个单词应用<span>标记以进行突出显示。 - Masha

如果您在两个元素之间进行高亮处理会怎样呢？（例如上面的示例中的“st phra”） - Joseph Marikle

我已经实现了一个将选择捕捉到单词的函数，但是如果不需要它就能得到字母位置，那就太好了。 - Masha

@Masha 我已经删除了我的回答。等我有更多时间时，稍后再仔细研究一下。重要的部分是突出显示文本的代码。这是解决该问题的问题：https://dev59.com/DG865IYBdhLWcg3wnP2a?noredirect=1&lq=1 - Joseph Marikle

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>

- baao

---

在这种情况下，innerText似乎比textContent更好。 - Joseph Marikle

它不需要你在答案中提到的替换。@JosephMarikle。你的回答很好，但是可以直接使用innerText。 :-) - baao

Answer 2

这里有一个答案将baao的回答和Joseph Marikle的回答（已被删除）结合起来。

selection.anchorNode.textContent获取正在突出显示的单词。

$("#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);
});

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

- Anthony

---

你正在选择整个单词，这很好，但请尝试选择相同的字母或添加相同的单词并检查结果是否改变。 - Masha

Answer 3

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

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

- LiorP