В официальных документах о методе Selection.addRange() я могу выбрать элемент, когда у меня есть определенный диапазон, но я не знаю, как получить диапазон для конкретного слова / цели, которая является частью текста

Примере:

<p>Hello world</p>

И я хочу добавить выбор диапазона для world, как если бы я пометил его вручную курсором мыши.

Дополнительно: Как я могу выбрать определенный текст и отметить его на основе некоторых правил Regex?

Я так и не смог найти ответ на ТАК. Официальные документы Mozilla о addRange(): https: // developer.mozilla.org/en-US/docs/Web/API/Selection/addRange

1
Ling Vu 20 Июл 2020 в 12:42

2 ответа

Лучший ответ

Это работает именно для вашего примера. Функция извлекает узел Text из заданного узла Element, поэтому имейте в виду, что если данный элемент содержит дочерние элементы Element (а не прямой текстовый контент), вам необходимо настроить эту функцию в соответствии со своими потребностями.

const el = document.getElementById('my-text-element');
selectWord(el, 'world');

function selectWord(element, word){
  const textNode = element.childNodes[0]; //retrieve the Text node from the Element node
  const selection = window.getSelection(); //get the Selection object
  const range = document.createRange(); //create the Range object
  const text = textNode.textContent; //retrieve the [string] from Text object
  const startPosition = text.search(word); //now we look for the word in the [string] value
  if(startPosition === -1) return; //if the word does not exist return and do nothing
  const endPosition = startPosition + word.length; //we need start and end position to select the found word
  range.setStart(textNode, startPosition); //it takes the Text node within we want to select some text, and we pass the starting character
  range.setEnd(textNode, endPosition); //we pass the ending character in the same Text node
  selection.addRange(range); //pass our prepared Range object and select the text
}
<p id="my-text-element">hello world</p>
3
Paweł 20 Июл 2020 в 20:46

Чтобы выбрать определенную часть элемента, эта часть должна иметь свой собственный тег, который затем можно выбрать в JavaScript

<p>Hello <span id = "xxx">world</span></p>
0
John Paul O'Conallain 20 Июл 2020 в 09:57