js选中文本和复制文本

发表于 分类于 评论次数： 阅读次数：
通过js代码选中页面的dom元素，和复制页面选中的文本

Selection

var selection = window.getSelection();
selection 是一个 Selection 对象。 如果想要将 selection 转换为字符串，可通过连接一个空字符串（””）或使用 String.toString() 方法。即selection+""或者selection.toString()会返回页面中选中的文本

Range

被选中的文字会对应一个range对象，代表选中的区域，通过window.getSelection().getRangeAt(0)代表第一个被选中的区域，也可以通过document.createRange()创建一个选中区域，range.selectNodeContents(el)将dom节点添加到range对象，selection.addRange(range)将range添加到文本选中区，selection.removeAllRanges()为取消选中的文本。执行下面的代码会选中页面的第一个p元素。

1
2
3
4
5
var el = document.querySelector("p");
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(el);
selection.addRange(range);

execCommand 方法允许运行命令来操纵可编辑内容区域的元素

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument);

  1. aCommandName: 一个 DOMString ，命令的名称。
  2. aShowDefaultUI: 一个 Boolean， 是否展示用户界面，一般为 false。
  3. aValueArgument: 一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。
  4. 返回值bool为布尔值，如果是 false 则表示操作不被支持或未被启用，执行document.execCommand('Copy', 'false', null);会复制页面选中的文本

示例（点击按钮复制p文本内容）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 页面dom元素
<p>aaa</p>
<button>复制</button>

// js代码
document.querySelector("button").onclick=function() {
    var el = document.querySelector("p");
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(el);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('Copy', 'false', null);
    selection.removeAllRanges();
}