Как выбрать слово при двойном щелчке с помощью Range-Interface?

Question

Например:

<span>"This is s"<span style="color:1abc9c">ent</span>"e<strong>nc</strong>"e to be select"</span>

Предложение выглядит так: "Это предложение, которое нужно выбрать" . Теперь, когда я дважды щелкну где-нибудь внутри слова предложение , оно должно выбрать это слово. Как выбрать это слово?

Answer 1

Если вы хотите дважды щелкнуть любое слово в предложении, чтобы выбрать слово "предложение" , но запретить выделение всего предложения :

let sentence = document.getElementsByClassName('sentence');
let word = document.getElementById('word');

Array.from(sentence).forEach(sentence =>
  sentence.addEventListener('dblclick', (e) => {
    e.preventDefault();
    let sel = window.getSelection();
    sel.removeAllRanges();
    let range = document.createRange();
    range.selectNode(word);
    sel.addRange(range);
  })
);

.sentence {
  user-select: none;
  cursor: text;
}

<span class="sentence">This is the </span><span id="word">sentence</span><span class="sentence"> to be selected.</span>

Или, если вы хотите , дважды щелкните любое слово в предложении, чтобы выбрать слово "предложение" :

let sentence = document.getElementById('sentence');
let word = document.getElementById('word');

sentence.addEventListener('dblclick', (e) => {
  e.preventDefault();
  let sel = window.getSelection();
  sel.removeAllRanges();
  let range = document.createRange();
  range.selectNode(word);
  sel.addRange(range);
});

<span id="sentence">This is the <span id="word">sentence</span> to be selected.</span>

Или, если вы хотите , нажать один раз на любое слово в предложении, чтобы выбрать слово "предложение" :

let sentence = document.getElementById('sentence');
let word = document.getElementById('word');

sentence.addEventListener('dblclick', () => {
  let sel = window.getSelection();
  sel.removeAllRanges();
  let range = document.createRange();
  range.selectNode(word);
  sel.addRange(range);
});

<span id="sentence">This is the <span id="word">sentence</span> to be selected.</span>

Или, если вы хотите , щелкните один раз на "предложение" , чтобы выбрать его:

let word = document.getElementById('word');

word.addEventListener('click', () => {
  let sel = window.getSelection();
  sel.removeAllRanges();
  let range = document.createRange();
  range.selectNode(word);
  sel.addRange(range);
});

This is the <span id="word">sentence</span> to be selected.

Или, если вы хотите один клик на "предложение" , чтобы выбрать его, используя CSS с user-select:

span {
  user-select: all;
}

This is the <span>sentence</span> to be selected.