复制的文字自动带有html,js选择和复制html中的文本

在开发过程中，有时候为方便用户，需要提供点击选中某部分文本并进行复制的操作。借助JQuery可以方便地实现以上需求。

而本篇所讲的是使用纯js的方式进行实现。大体分为两类。

选中文本

针对文本控件(如文本域、输入框)

针对文本控件，其本身有select()方法可供调用，所以处理起来是很方便的，直接定位到目标元素，然后调用其select()方法即可。

示例元素

示例代码

document.getElementById('testSel').select();

针对div等块级元素

对于div等元素，由于其并未提供select()方法，故需要另外实现。以下为博主整理的示例，经供参考。

示例元素

示例代码

/**

* 选择函数

*/

function selectText(element){

var text = document.getElementById(element);

if (document.body.createTextRange) {

var range = document.body.createTextRange();

range.moveToElementText(text);

range.select();

} else if (window.getSelection) {

var selection = window.getSelection();

var range = document.createRange();

range.selectNodeContents(text);

selection.removeAllRanges();

selection.addRange(range);

} else {

console.log('none');

}

}

//使用示例

selectText('testSel');

此示例只是简单演示，可以根据需求更改 selectText 函数，使其更完善更强大，比如针对class、id做适配等

复制

以上完成了文本选择操作，接下来就是复制操作了。使用以下代码即可完成复制。

document.execCommand("Copy");

拓展

了解了以上知识，对于div等元素，实现复制，可以转变一下思路，在用户点击复制交互的时候，使用文本控件呈现，控件内容为div内文本内容(即展示一个正常情况下隐藏的文本控件，原始的div或覆盖或隐藏)，这样，就可以使用文本控件的 select() 方法进行文本选择。

目前很多网站都采用这样的处理方式，可以规避很多问题，如兼容性问题。