javascript - 查找与所选文本匹配的 DOM 选择器集

Question

假设你去了某个地方并选择了一些文本:

当您查看 DOM 时，它位于此处:

但实际上是这段文字:“Local embassy – For Wikipedia”，调试器不太正确。

我想知道的是如何从根本上找到与所选文本最匹配的选择器集。所以在突出显示方面，你会得到这个:

<b><a href="/wiki/Wikipedia:Local_Embassy" title="Wikipedia:Local Embassy">Local embassy</a></b> – For Wikipedia

它应该从这个简单的文本选择函数开始:

function getSelectionText() {
  var text = ''
  if (window.getSelection) {
    text = window.getSelection().toString()
  } else if (document.selection && document.selection.type != 'Control') {
    text = document.selection.createRange().text
  }
  return text
}

(解决这个问题):

...到一个函数，而不是返回匹配文本的选择器集，比如:

parent == '#mp-other-content li'
selectors relative to parent ==
  [
    'b',
    '#text'
  ]

想知道如何正确地做到这一点。不知道如何让调试器突出显示文本，只是想知道如何获取所选文本并返回与其最匹配的选择器。

Answer 1

tldr; var mySelectionHtmlElement = window.getSelection().anchorNode.parentElement;

这应该有效。从那里您可以浏览 DOM。 如果您只选择文本而不是链接或链接和文本的一部分，您应该得到 <li>作为 parent 。如果您只选择链接文本，您将获得 <a>作为 parent 。

$('body').on('mouseup', event => {
	console.log('selection text',window.getSelection().toString());
  console.log('selection node', window.getSelection());
  console.log('selections parent html element', window.getSelection().anchorNode.parentElement);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<b><a href="www.google.com">My Link</a></b>
- my followup text
</li>
</ul>