如何使用范围接口在双击时选择一个单词？

Question

例如：

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

句子是这样的：“这是要选择的句子”。现在，当我双击单词 sentence 内的任意位置时，它应该选择该单词。这个词怎么选？

Answer 1

如果您想双击句子中的任何单词来选择单词“sentence” 但不能选择整个句子：

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>

或者如果你想双击句子中的任何单词来选择单词“sentence”：

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>

或者如果您想单击句子中的任何单词来选择单词“sentence”：

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.

或者，如果您想在 “句子” 上单击以使用带有 user-select 的 CSS 选择它：

span {
  user-select: all;
}

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