Найти набор селекторов DOM, соответствующих выделенному тексту - PullRequest
Новая
       12

Найти набор селекторов DOM, соответствующих выделенному тексту

0 голосов
/ 31 октября 2018

Скажем, вы идете в какое-то место и выбираете какой-то текст:

enter image description here

Когда вы смотрите на DOM, он где-то здесь:

enter image description here

Но на самом деле это такой текст: "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
}

(что разрешает к этому):

enter image description here

... Для функции, которая вместо этого возвращает набор селекторов, которые соответствуют тексту, что-то вроде: 

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

Хотите знать, как правильно это сделать. Не интересно, как заставить отладчик выделять текст, как получить выделенный текст и вернуть селекторы, наиболее близко соответствующие ему.

1 Ответ

0 голосов
/ 31 октября 2018

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

Это должно работать. Оттуда вы можете перемещаться по DOM. Если вы выберете только текст, не являющийся частью ссылки, или ссылку и текст, вы должны получить <li> в качестве родительского. Если вы просто выделите текст ссылки, вы получите <a> в качестве родителя. 

$('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>
...