javascript - 如何选择元素中的所有文本？

Question

如何选择元素中的所有文本？

<div class="wrapper">
    <div class="content">Lorem ipsum dolor sit amet.</div>
</div>

“Wrapper”是一个 ElementRef。如何选择“.content”中的所有文本(例如突出显示文本)？

我尝试了以下方法但没有成功:

const selectedElm = selectedRef.nativeElement
(selectedElm.querySelector('.content') as HTMLInputElement).select();
(selectedElm.querySelector('.widget-content') as HTMLInputElement).setSelectionRange(0, 5)

Answer 1

您无法(逐个字符)选择文档中普通元素文本的文本。 (即使使用 JQuery 的 .select() 也不行。您需要将文本放在某种可编辑容器中才能工作。

您可以使用 createRange() 来完成此操作

var x = document.querySelector(".wrapper");

// Depending on which method is supported by browser
if (document.selection) {
  // Create a range of text object
  var range = document.body.createTextRange();
  range.moveToElementText(x); // Apply range to element in question
  range.select();  // Now, select will work
} else if (window.getSelection) {
  var range = document.createRange();
  range.selectNode(x);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="content">Lorem ipsum dolor sit amet.</div>
</div>