javascript - angular js从范围div和span元素中选择所有文本以让用户复制所选文本

Question

我正在尝试创建一些文本的全选 功能(在 Angular js 中)，这些文本以类似于下面给出的结构的格式出现。选择所有文本后，用户可以按 ctrl + c 复制相同的内容。

<div ="container">
 <div class="header">My example header</div>
  <div class="section1">
    <span>test content1</span>
    <span>test content2</span>
  </div>
  <div class="section2">
    <span>test content3</span>
    <span>test content4</span>
  </div>
  <div class="footer">footer content</div>
</div>

将有一个按钮，点击它，需要选择 container div 中出现的所有文本。我搜索了很多示例，到目前为止，我找到的所有示例都提供了有关如何从文本区域或文本框中选择文本的解决方案。我想了解如何从此类 html 元素中选择所有文本。

Answer 1

查看此答案:https://stackoverflow.com/a/6150060/2363552

这是它的工作原理:Plnkr example

Javascript

function selectElementContents(el) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

HTML

<div id="container">
    <div class="header">My example header</div>
    <div class="section1">
        <span>test content1</span>
        <span>test content2</span>
    </div>
    <div class="section2">
        <span>test content3</span>
        <span>test content4</span>
    </div>
    <div class="footer">footer content</div>
</div>
<button type="button" onclick="selectElementContents(document.getElementById('container'))">Select Text</button>